Question

你好，在开始时，我仍然没有js或jquery的经验，但我仍然在研究我的技能。

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

创建表工作正常，但下一步是刷新表中的数据每个＆＃34; x＆＃34;秒。

我做了一些研究，但到目前为止我找不到任何解决方案。

自己的表：

<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>

创建表的代码如下：

$(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);
    });

});

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

对我有什么建议吗？提前谢谢！

Answer 1

如果您想每x秒刷新一次表，则应使用setInterval()函数。

Answer 2

顾名思义，

setTimeout会在执行前等待一段时间。但是，setInterval会创建一个每隔n秒运行一次的间隔调用者。您必须将签名方法更改为该方法。

但是，你有另一个功能。因为在追加之前不从表中删除先前动态添加的条目，所以每次间隔运行时都会追加相同的行。为避免这种情况，您应该为表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);
    });
}

带有json数据的ajax自动更新表

2 个答案: