使用json数据的ajax自动更新表

hello and right at the beginning, I still have not much experience with js or jquery but I am still working on my skills.

你好，刚开始的时候，我对js和jquery还没有太多的经验，但是我还在努力学习我的技能。

I have a table and the data in the table are coming from an external json file, to which I have no influence.

我有一个表，表中的数据来自一个外部json文件，我对这个文件没有影响。

creating the table works fine, but the next step is to refresh the data in the table every "x" seconds.

创建表工作正常，但是下一步是每“x”秒刷新表中的数据。

I have done some research but i could not find any solutin till now.

我已经做了一些调查，但是到现在我还没有找到任何解决办法。

the table it self:

表它自我:

<table class="table table-hover">
<thead>
    <tr>
        <th>Number</th>
        <th>Sign</th>
        <!--<th>Group</th>-->
        <th>Location</th>
        <th>N</th>
        <th>E</th>
        <th>On position</th>
        <th>Ignition on</th>
        <th>Moving</th>
    </tr>
</thead>
<tbody id="vehicleList">

</tbody>
</table>

the code, which creates the table is the following:

创建表的代码如下:

$(document).ready(function() {
refreshTable();
$.getJSON(getshowObjectReportExtern, function(data){
    var vehicleListData = '';
    $.each(data, function(key, value){
        vehicleListData += '<tr id="rowVehicleStatus" class="">';
        vehicleListData += '<td>'+value.objectno+'</td>';
        vehicleListData += '<td>'+value.objectname+'</td>';
        //vehicleListData += '<td>'+value.objectgroupname+'</td>';
        vehicleListData += '<td>'+value.postext_short+'</td>';
        vehicleListData += '<td>'+value.latitude_mdeg+'</td>';
        vehicleListData += '<td>'+value.longitude_mdeg+'</td>';
        vehicleListData += '<td>'+value.pos_time+'</td>';
        vehicleListData += '<td>'+value.ignition+'</td>';
        vehicleListData += '<td>'+value.standstill+'</td>';
        vehicleListData += '</tr>';     
    });
    $('#vehicleList').append(vehicleListData);


});

function refreshTable(){
    $('#vehicleList').load(getshowObjectReportExtern, function(){
       setTimeout(refreshTable, 5000);
    });

});

the result at the moment is, that the table will be created but after the first reload the raw json data will be added to the table.

此时的结果是，将创建表，但在第一次重载之后，原始json数据将被添加到表中。

has anybody any advice for me? thanks in advance!

有人给我提建议吗?提前谢谢!

2 个解决方案

#1

setTimeout does, as the name suggestes, wait a period of time before executing. setInterval however creates a interval caller that is ran every n seconds. You have to change your signature method to that.

正如名称所示，setTimeout会在执行之前等待一段时间。但是，setInterval创建一个每n秒运行一次的interval调用程序。您必须将签名方法更改为该方法。

However, you have another function. Because you don't remove the previous dynamically added entries from the table before you append, you will append the same rows every time the interval runs. To avoid this, you should assign some class to the tbody or something of your table, then clear this before adding the content back. This ensures that the content of the json file is not added multiple times.

但是，还有另一个函数。因为您不会在追加之前从表中删除之前动态添加的条目，所以每次间隔运行时都将追加相同的行。为了避免这种情况，您应该为tbody或表的某些内容分配一些类，然后在添加内容之前清除这些类。这将确保json文件的内容不会被多次添加。

$(document).ready(function() {
    // Fetch the initial table
    refreshTable();

    // Fetch every 5 seconds
    setInterval(refreshTable, 5000);
});

function refreshTable(){
    $.getJSON(getshowObjectReportExtern, function(data) {
        var vehicleListData = '';
        $.each(data, function(key, value) {
            vehicleListData += '<tr id="rowVehicleStatus" class="">';
            vehicleListData += '<td>'+value.objectno+'</td>';
            vehicleListData += '<td>'+value.objectname+'</td>';
            //vehicleListData += '<td>'+value.objectgroupname+'</td>';
            vehicleListData += '<td>'+value.postext_short+'</td>';
            vehicleListData += '<td>'+value.latitude_mdeg+'</td>';
            vehicleListData += '<td>'+value.longitude_mdeg+'</td>';
            vehicleListData += '<td>'+value.pos_time+'</td>';
            vehicleListData += '<td>'+value.ignition+'</td>';
            vehicleListData += '<td>'+value.standstill+'</td>';
            vehicleListData += '</tr>';     
        });

        // We use .html instead of .append here, to make sure we don't add the same
        // entries when the interval is ran for the n-th time.
        $('#vehicleList').html(vehicleListData);
    });
}

#2

If you want to refresh your table for every x seconds, you should use setInterval() function instead.

如果希望每隔x秒刷新一次表，应该使用setInterval()函数。