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

您好，刚开始的时候，我对js或jquery还没有太多经验，但我仍在努力提高我的技能

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

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

我做了一些研究，但到目前为止还没有找到任何解决办法

表格本身：

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

数
签名
位置
N
E
在位
点火
移动

创建表的代码如下所示：

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

});

$（文档）.ready（函数（）{
刷新表（）；
$.getJSON（getshowObjectReportExtern，函数（数据）{
var vehicleListData=''；
$。每个（数据、函数（键、值）{
车辆列表数据+=''；
vehicleListData+=''+值。objectno+''；
vehicleListData+=''+值。objectname+''；
//vehicleListData+=''+值。objectgroupname+''；
vehicleListData+=''+值。postext_short+''；
vehicleListData+=''+值。纬度\u mdeg+''；
vehicleListData+=''+值.经度\u mdeg+''；
vehicleListData+=''+值。位置时间+''；
vehicleListData+=''+值。点火+''；
vehicleListData+=''+值。静止+''；
车辆列表数据+=''；
});
$（“#车辆列表”）.append（车辆列表数据）；
});
函数刷新表（）{
$（“#车辆列表”）.load（getshowObjectReportExtern，函数（）{
设置超时（刷新表，5000）；
});
});

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

有人对我有什么建议吗？

---

提前感谢！

如果您想每x秒刷新一次表，您应该使用

setInterval（）

函数。

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

$（文档）.ready（函数（）{
//获取初始表
刷新表（）；
//每5秒取一次
设置间隔（刷新，5000）；
});
函数刷新表（）{
$.getJSON（getshowObjectReportExtern，函数（数据）{
var vehicleListData=''；
$。每个（数据、函数（键、值）{
车辆列表数据+=''；
vehicleListData+=''+值。objectno+''；
vehicleListData+=''+值。objectname+''；
//vehicleListData+=''+值。objectgroupname+''；
vehicleListData+=''+值。postext_short+''；
vehicleListData+=''+值。纬度\u mdeg+''；
vehicleListData+=''+值.经度\u mdeg+''；
vehicleListData+=''+值。位置时间+''；
vehicleListData+=''+值。点火+''；
vehicleListData+=''+值。静止+''；
车辆列表数据+=''；
});
//我们在这里使用.html而不是.append，以确保不添加相同的内容
//第n次运行间隔时的条目。
$（'#车辆列表'）.html（车辆列表数据）；
});
}

非常感谢。我理解，但知道在第一次将数据加载到表中之前，我必须等待

n

秒，然后删除表头和css类。愚蠢的我。将不再删除表头。

id=“vehicleList”

我是不是找错行了。解决了50%。我当前的问题是，我不知道如何对表中的数据进行初始加载，然后每隔

n

秒开始刷新一次。@wuk986它在我的代码中？文档准备好后，它每5秒开始提取一次表。如果您想在5秒前提取它s、 只需在设置时间间隔之前调用refreshTable。查看我的更新代码。