使用jQuery在网页上实时数据

时间:2022-04-16 03:54:58

I would like a webpage that constantly updates a graph with new data as it arrives. Regularly, all the data you have is passed to the page at the beginning of the request. However, I need the page to be able to update itself with fresh information every few seconds to redraw the graph.

我想要一个网页,不断地用新数据更新图表。通常,您所拥有的所有数据都将在请求开始时传递给该页。但是,我需要页面能够每隔几秒钟更新一次新的信息来重新绘制图形。

Background

The webpage will be similar to this http://www.panic.com/blog/2010/03/the-panic-status-board/. The data coming in will temperature values to be graphed measured by an Arduino and saved to the Django database (this part is already complete).

这个网页类似于http://www.panic.com/blog/2010/03/the panic-status-board/。将要输入的数据将由Arduino测量并保存到Django数据库(这一部分已经完成)。

Update

It sounds as though the solution is to use the jQuery.ajax() function ( http://api.jquery.com/jQuery.ajax/) with a function as the .complete callback that will schedule another request several seconds later to a URL that will return the data in JSON format.

似乎解决方案是使用jQuery.ajax()函数(http://api.jquery.com/jQuery.ajax/),并使用一个函数作为.complete回调,该回调将在几秒钟后调度另一个请求到一个URL,该URL将以JSON格式返回数据。

How can that method be scheduled? With the .delay() function?

如何安排这种方法?.delay()函数?

2 个解决方案

#1


6  

So the page must perform periodic jQuery.ajax calls with a url parameter set to a server's URL where the latest up-to-data information (possibly just as an incremental delta from the last instant for which the client has info -- the client can send that instant as a query parameter in the Ajax call) is served, ideally in JSON form. The callback at the completion of the async request can schedule the next ajax calls for a few seconds in the future, and then repaint the graph.

因此页面必须执行周期性jQuery。ajax调用的url参数设置为服务器的url的最新up-to-data信息(可能只是一个增量δ从最后一个即时的客户信息,客户端可以发送即时作为查询参数在ajax调用),JSON形式的理想。异步请求完成时的回调可以将下一个ajax调用安排在未来几秒钟,然后重新绘制图表。

The fact that, server-side, you're using Django, doesn't seem all that crucial -- the server just needs to format a bunch of data as JSON and send it back, after all.

使用Django的服务器端看起来并不是那么重要——服务器只需将一堆数据格式化为JSON并将其发送回来。

#2


0  

If the data is composed by on-the-fly graphics, you can just serve them (in gif, png or any other graphic format) through Django and reload each individually or even reload all the page at once.

如果数据是由动态图形组成的,您可以通过Django为它们提供服务(gif、png或任何其他图形格式),并逐个重新加载它们,甚至一次重新加载所有页面。

It depends on the load and performance requirements, but you can start simply reloading all the page and then, if necessary, use AJAX to reload just each specific part (it's very easy to achieve with jQuery or prototype using updates). If you expect a lot of data, then you should change to generate the graphic on the client, using just JSON incremental data.

这取决于加载和性能需求,但是您可以简单地重新加载所有页面,然后,如果需要的话,使用AJAX重新加载每个特定的部分(使用jQuery或使用更新实现原型非常容易)。如果您希望获得大量数据,那么您应该使用JSON增量数据在客户机上生成图形。

#1


6  

So the page must perform periodic jQuery.ajax calls with a url parameter set to a server's URL where the latest up-to-data information (possibly just as an incremental delta from the last instant for which the client has info -- the client can send that instant as a query parameter in the Ajax call) is served, ideally in JSON form. The callback at the completion of the async request can schedule the next ajax calls for a few seconds in the future, and then repaint the graph.

因此页面必须执行周期性jQuery。ajax调用的url参数设置为服务器的url的最新up-to-data信息(可能只是一个增量δ从最后一个即时的客户信息,客户端可以发送即时作为查询参数在ajax调用),JSON形式的理想。异步请求完成时的回调可以将下一个ajax调用安排在未来几秒钟,然后重新绘制图表。

The fact that, server-side, you're using Django, doesn't seem all that crucial -- the server just needs to format a bunch of data as JSON and send it back, after all.

使用Django的服务器端看起来并不是那么重要——服务器只需将一堆数据格式化为JSON并将其发送回来。

#2


0  

If the data is composed by on-the-fly graphics, you can just serve them (in gif, png or any other graphic format) through Django and reload each individually or even reload all the page at once.

如果数据是由动态图形组成的,您可以通过Django为它们提供服务(gif、png或任何其他图形格式),并逐个重新加载它们,甚至一次重新加载所有页面。

It depends on the load and performance requirements, but you can start simply reloading all the page and then, if necessary, use AJAX to reload just each specific part (it's very easy to achieve with jQuery or prototype using updates). If you expect a lot of data, then you should change to generate the graphic on the client, using just JSON incremental data.

这取决于加载和性能需求,但是您可以简单地重新加载所有页面,然后,如果需要的话,使用AJAX重新加载每个特定的部分(使用jQuery或使用更新实现原型非常容易)。如果您希望获得大量数据,那么您应该使用JSON增量数据在客户机上生成图形。