Question

我正在创建一个模拟证券交易所市场的项目。我在一个大的html <table>上向用户公开了库存数据，其中每个<tr>行都有两个<td>单元格。其中一个是公司的象征（即AAPL），另一个是当前的市场价值（不可能更简单）。

我现在所做的是使用这样的javascript函数：

<script type="text/javascript">

$(function(){
    setInterval(loadTable, 10000)
});

function loadTable(){
  $("#se_table").load("/load/table/?ajax&user={{user.username}}");
}

</script>

这是最好的方法吗？只更改一个值时，我应该加载整个表吗？

Answer 1

首先，如果有人忙于对表做某事，例如突出显示文本，当它突然重新渲染时，这可能会导致糟糕的用户体验。如果必须重新加载所有数据，至少只更新已更改的行。您可以使用javascript内置表操作或任意数量的jQuery plugins来实现此目的。

其次，如果它在计算上是合理的，那么在数据传输和用户体验方面，如果您可以计算哪些行已更改，并且仅发送这些行，则会更有效。为表中的每一行分配一个全局唯一的id，这样您就可以使用jQuery轻松更新该行。使用这种技术，还可以轻松添加特定行已更新的一些视觉提示，例如轻微的颜色变化，这通常很好（如果适用）。

我最喜欢做这种事情的方式（没有Comet）如下：

每隔10秒轮询一个页面，该页面仅返回数据是否已更改。检查这比始终发送所有数据更有效。您只需要存储一个datetime字段，该字段包含最后一个值的更改时间，并检查浏览器收到的最后一个日期时间（与请求一起发送）。
如果已更改，请使用jQuery trigger方法发送另一个ajax请求，这次期望自该日期时间以来已更改的行列表。
更新受影响的行。

<强>更新

根据您的评论，我只需添加一些额外的注释。

对于轮询，您可能会使用jQuery .get()方法。你说你正在使用Django，所以我建议使用json，这意味着在你的视图中你将返回JSON数据。这里是a simple tutorial让您入门。
在成功的回调函数中，检查是否有新数据带有从Django视图返回的布尔值，如果有，则调用一个函数进行新的ajax调用以检索相关数据（同样，一个JSON对象））。
使用此JSON对象，遍历每个必须更新的项目，并使用jquery text函数或其中一个jQuery表插件来更新行。

如果你刚接触到这一点，这是非常满口的和大量的谷歌搜索，但这是一个很好，干净的方式。

Answer 2

广泛使用data属性。在初始GET页面请求期间，您的包含值的列如下所示：

<td data-for-symbol="GOOG">+256.00</td>

让/load/table/?ajax&user={{user.username}}返回一个JSON响应，其中包含自上次用户获取表以来更新的对象，然后单独应用它们：

$('td[data-for-symbol=' + obj.symbol + ']').text(obj.value);

不能比那更干净。

Answer 3

您可以考虑使用websockets What browsers support HTML5 WebSocket API?

Answer 4

如果只有一个值发生变化，网页将如何知道？这将涉及无论如何获取所有数据，然后将新数据与当前数据进行比较，然后设置单元格内容。当你完成这项工作时，可能会更快地加载整个表格。

表格加载是否会导致任何明显的问题，例如浏览器重新格式化时的页面闪烁？我坚持使用.load直到它成为一个问题。但还有更多......

您是否看过各种各样的jQuery插件表增强功能？各种各样的魔法包含在jQuery中，用于排序，过滤，从源中获取数据等等。它总是更容易学习如何使用这些并用这样的东西开始你的项目，而不是手工完成，然后一旦你意识到你喜欢所有这些功能就转换它。谷歌的“jquery表”，也许是“数据”或“ajax”，你会有所收获。

Answer 5

当引发事件.trigger()中的值发生更改并编写类似

的处理程序时

$("td").live("yourCustomTrigger",function(){

var $td=$(this);
$("$td").val("updated value")
//here update your td only

})

但你还是要弄清楚一些问题，比如如何确定td中的值已被改变？正如 Spacedman

所指出的那样

here是一些有用的插件

django，ajax：如何有效地更新一堆数据

5 个答案: