0

我有一个像你在下面看到的 JSON，我想“保持活力”。我想不断地查询服务器（以连续的间隔“刷新”，比如 30 秒）并相应地更新页面上显示的内容。JSON 如下所示：

[
        {
            "Name": "Paul",
            "Date": "2012-10-26",
            "Score": 8
        },
        {
            "Name": "Janet",
            "Date": "2012-10-24",
            "Score": 18
        },
        {
            "Name": "Rick",
            "Date": "2012-10-26",
            "Score": 13
        }
]

我当前显示的（静态）版本是：

<body>
<script>
$.getJSON('myjson.json', function(data) {
for (var i in data) {
var Name = data[i].Name;
var Score = data[i].Score;
}           
var output = "<ul>";
for (var i in data) {
output += "<li>" + Name + "--" + Score;
}
output += "</ul>";
document.getElementById("placeholder").innerHTML=output;
});
</script>
<div id="placeholder"></div>
</body>

这当然会显示数据，但是随着服务器上的 json 更改（不刷新页面），我将如何将更改“流式传输”到“Score”？

这就是所谓的轮询吗？

任何帮助表示赞赏。谢谢

4

2 回答 2

2

您只需要使用计时器，或者更具体地说，setInterval()...

<script>
    function getData() {
        $.getJSON('myjson.json', function(data) {
            for (var i in data) {
                var Name = data[i].Name;
                var Score = data[i].Score;
            }           
            var output = "<ul>";
            for (var i in data) {
                output += "<li>" + Name + "--" + Score;
            }
            output += "</ul>";
            document.getElementById("placeholder").innerHTML=output;
        });
    }
    setInterval(getData, 30000);

    $(function() {
        getData();
    });
</script>

上述脚本将getData()在 document.ready 处运行该函数，然后每 30 秒运行一次，并#placeholder使用返回值更新元素。

于 2013-01-14T18:30:11.663 回答
1

没有任何花里胡哨的东西，您可以将整个事情包装在一个函数中，然后使用setInterval或setTimeout调用它，以便它以给定的时间间隔运行代码。

基本示例：

function getData(){
  ... your code ...

  setTimeout( getData, 3000 ); // Get data and refresh page every 3000 ms (3 seconds)
}

// 调用函数开始数据收集

getData();
于 2013-01-14T18:31:14.313 回答