ajax自动更新表与JSON数据

你好，在开始的时候，我仍然没有太多的经验与js或jquery，但我仍然在努力我的技能。ajax自动更新表与JSON数据

我有一个表，表中的数据来自外部的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>

的代码，其中创建该表如下：

$(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数据将被添加到表中。

有没有人对我有任何建议？在此先感谢！

来源

2017-09-22 wuk986

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

来源

2017-09-22 06:53:09 OptimusCrime

非常感谢。据我所知，但我知道我必须等待第一次数据加载到表中的'n'秒，然后删除表头和CSS类。 – wuk986

愚蠢的我。表头不会再被删除。 'id =“vehicleList”'是我错误的行。 – wuk986

50％已解决。我目前的问题是，我不知道如何执行表中数据的初始化负载，然后在每个'n'秒开始刷新。 – wuk986

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

来源

2017-09-22 06:44:43 rafon

ajax自动更新表与JSON数据

回答

相关问题