Question

我正在试图找出如何直接更新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秒自动上传服务器的最新数据。

我想了解一下如何寻找这类东西，以及我们应该寻找的东西。

不确定从服务器推送数据是否比从服务器提取数据更好的方法，我认为推送会减少过载。

任何宣传都会受到非常感谢。

Answer 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,
}

Answer 2

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

从db live加载数据

2 个答案: