0

我正在尝试弄清楚如何实时更新 ul li 列表。

假设：我们有一个无序列表，每个 li 元素都从最新到最旧显示。我正在寻找一种方法，轮询服务器以获取更新，并将该更新推送到列表（可能使用 jSon）实时并且不刷新页面。

例子。

<ul>
<li>12 seconds ago: Apple</li>
<li>32 seconds ago: Banana</li>
<li>42 seconds ago: Grape</li>
</ul>

<ul>
<li>2 seconds ago: Pineapple</li>
<li>22 seconds ago: Apple</li>
<li>32 seconds ago: Banana</li>
<li>52 seconds ago: Grape</li>
</ul>

所以如果我们只是盯着页面，就像一个悲伤的失败者。该列表每隔 x 秒自动上传一次来自服务器的最新数据。

我只是想要一些关于寻找这种东西的指示，以及我们真正应该寻找的东西。

不确定从服务器推送数据是否比从服务器拉取数据更好，我想推送会减少过载。

任何建议将不胜感激。

4

2 回答 2

1

一种可能的解决方案是使用 XMLHttpRequest 轮询服务器以获取 JSON。您的客户端 JavaScript 如下所示：

setInterval(updateList, 5000); // run updateList() every 5 seconds

// This assumes you're using jQuery
// You can still do this without jQuery, it just makes things easier
function updateList()
{
    $.getJSON('<<URL to your JSON producing script here>>', function(data) {
        var items = [];

        $.each(data, function(fruit, time) {
            items.push('<li>' + time + ' seconds ago: ' + fruit + '</li>');
        });

        $('#my-list').html(items.join(''));
    });
}

您的 HTML 可能如下所示：

<ul id='my-list'>
</ul>

最后，您的 JSON 应遵循以下格式：

{
    'Pinapple' : 2,
    'Apple' : 22,
    'Banana' : 42,
    'Grape' : 52,
}
于 2012-07-19T02:59:17.503 回答
0

现在实际上有一个 SAAS 应用程序可以简单快速地执行此操作，因此您不必硬编码并且可以节省时间： Json Data

于 2013-01-02T07:36:13.837 回答