从 JSON 获取的数据未更新答案

【问题标题】：Data fetched from JSON not getting updated从 JSON 获取的数据未更新
【发布时间】：2012-11-13 02:41:05
【问题描述】：

下面是脚本：

$(document).ready(function () {
    $.getJSON('table.json', function (data) {
        $('#mytable').empty();
        var html = '';
        html += '<tr class="tableheader"><th>Name</th><th>Code</th><th>Value</th><th>Bid</th><th>Offer</th></tr>';
        for (var i = 0, size = data.length; i < size; i++) {
            html += '<tr class="tablecontent"><td>' + data[i].name + '</td><td>' + data[i].code + '</td><td>' + data[i].value + '</td><td>' + data[i].bid + '</td><td>' + data[i].offer + '</td></tr>';
        }
        $('#mytable').append(html);
        tablerows('mytable');
        setTimeout(poll, 5000);
    });
});
var poll = function () {
    alert("poll");
    $.getJSON('dummy.json', function (data) {
        setTimeout(poll, 5000);
    });
}

我想更新我的数据。 poll 函数每 5 秒调用一次，我通过 alert 进行了检查。但是数据没有得到更新。请告诉我我做错了什么。

【问题讨论】：

内联 HTML 创建不好 - 查看微模板。轮询也很糟糕，请查看 comet / websockets。
帮自己一个忙，不要使用alert()进行验证。找到浏览器的开发者控制台，并使用console.log() 或其他console 工具。然后你可以console.log(data)，你就能看到问题所在了。
在投票功能中你没有改变任何东西，你怎么知道数据没有更新？
您似乎没有多次调用该函数来更新您的数据。您第一次调用 table.json 并更新您的表，然后在后续实例中调用 dummy.json 并且不对返回的数据执行任何操作。
@nuclearGhost.. 我无法理解。首先调用 table.json 正在返回我的数据。下次我打电话给 dummy.json。之后我该怎么办？

标签： javascript jquery json

【解决方案1】：

getJSON 是一个 GET 请求，因此会被缓存。在服务器上设置正确的无缓存头。

还要看看你的代码，你从不处理数据

var poll = function () {
    alert("poll");
    $.getJSON('dummy.json', function (data) {
        setTimeout(poll, 5000);  //<--where is the processing you do nothing with the response???
    });
}

【讨论】：

【解决方案2】：

$(document).ready(function() {
       // make the initial JSON request
    $.getJSON('table.json', init)
});

function poll() {
       // make the subsequent JSON requests
    $.getJSON('dummy.json', update);
}

function init(data) {
    $('#mytable').empty();
    var html = '';
    html += '<tr class="tableheader"><th>Name</th><th>Code</th><th>Value</th><th>Bid</th><th>Offer</th></tr>';
    for (var i = 0, size = data.length; i < size; i++) {
        html += '<tr class="tablecontent"><td>' + data[i].name + '</td><td>' + data[i].code + '</td><td>' + data[i].value + '</td><td>' + data[i].bid + '</td><td>' + data[i].offer + '</td></tr>';
    }
    $('#mytable').append(html);
    tablerows('mytable');
    setTimeout(poll, 5000);
}

function update(data) {
    var rows = $("#mytable tr.tablecontent").toArray();
    for (var i = 0, size = data.length; i < size; i++) {
        if (rows[i])
            rows[i].cells[3].firstChild.data = data[i].bid;
    }
    setTimeout(poll, 5000);
}

这是带有更多 jQuery 的 update 函数：

function update(data) {
    $("#mytable tr.tablecontent > td:nth-child(4)")
         .slice(0, data.length)
         .text(function(i) {
             return data[i].bid;
          });
    setTimeout(poll, 5000);
}

【讨论】：

@epascarello：我最初有.ready(poll)，但后来注意到getJSON 请求的URL 不同。作为替代方案，我可以让poll 将url 作为参数。
啊，我没有发现不同的 URL，我打赌来自 OP 的拼写错误。
感谢 user1689607。但是有了这个，整个数据都被新的 json 替换了。我希望更新一些条目。
@user1814044：所以您希望每个间隔都将新行添加到表中，但保留之前的行？我会更新的。
...或者您是说要保留行，但只需添加新数据？