Question

我的服务器中有一个JSON文件，该文件经常更新。我希望这个ajax电话阅读每一个3秒钟，然后用新数据更新html中的表格。下面的ajax调用有效，但是如何继续将相同的表追加到html中已经存在的表中，从而创建一个相同表的无限循环。

我认为我的工作是这样的，

record = "";
$("#table").append(record);

可以，但不能。有什么想法吗？谢谢。另外，我认为这不是最有效的方法。如果您在这方面有任何想法，那就太好了。

AJAX通话

 var interval = 3000;
 function doAjax() {
 $.ajax({
    url: "doc/articles.json",
    dataType: "json",
    type: "get",
    cache: false,
    success: function(data) {
        $(data.articles).each(function(index, value) {
        var record = "<tr><td>" + (index+1) + "</td><td>" + value.name+"</td></tr>";
        $("#table").append(record);
        })
    },
    complete: function (data) {
                setTimeout(doAjax, interval);
                record = "";
                $("#table").append(record);
        }
});
}

Answer 1

获得无限表的原因是因为$("#table").append(record);会将值附加到现有值上。构建包含所有记录的变量$newTable，并使用$("#table").html(newTable)替换现有表。像这样：

var interval = 3000;
 function doAjax() {
 var newTable = "";
 $.ajax({
    url: "doc/articles.json",
    dataType: "json",
    type: "get",
    cache: false,
    success: function(data) {
        $(data.articles).each(function(index, value) {
           newTable += "<tr><td>" + (index+1) + "</td><td>" + value.name+"</td></tr>";
        })
        $("#table").html("<table>" + newTable + "</table>");
    },
    complete: function (data) {
                setTimeout(doAjax, interval);
                record = "";
        }
});
}

Answer 2

我会做这样的事情： HTML：

<div id="table_wrapper">
<!-- table will go here -->
</div>

JS

var interval = 3000;
 function doAjax() {
 $.ajax({
    url: "doc/articles.json",
    dataType: "json",
    type: "get",
    cache: false,
    success: function(data) {
        $(data.articles).each(function(index, value) {
            var record += "<tr><td>" + (index+1) + "</td><td>" + value.name+"</td></tr>";
        })
        $("#table_wrapper").html('<table>'+record+'</table>');

    },
    complete: function (data) {
                setTimeout(doAjax, interval);
                record = "<tr><td></td><td>Updating data</td></tr>";
                $("#table_wrapper").html('<table>'+record+'</table>');
        }
});
}

如何使用JSON中的文件更新HTML表，而不是将表追加到现有表中

2 个答案: