使用Jquery - Json更新页面数据而不刷新页面

时间:2017-08-03 15:13:44

标签: jquery json

我有一个脚本,每隔10秒调用另一个脚本来获取Json字符串。 Json字符串中的结果数据填充Jquery生成的数据表。这种方式在显示数据时会起作用,但在Json字符串的内容发生更改时不会更新数据。如果我手动刷新浏览器,屏幕数据会更新。我做错了,如果有的话,任何人都会看到我犯了什么错误。

的Json

[{"data":[{"ClientImageName":"British-Airways.png","ClientName":"British Airways","RoomName":"Room 7","RoomFromTime":"06:00","RoomToTime":"18:00"},{"ClientImageName":"logo.png","ClientName":"Name 12","RoomName":"Room 12","RoomFromTime":"07:00","RoomToTime":"19:00"}]}]

Jquery的

$(document).ready(function() {
function get_data() {
  $.getJSON("get_data.php", function(json){
  json = json[0].data;
  var tr ;
  for (var i = 0; i < json.length; i++) {

      tr = $('<tr/>');
      tr.css("border-bottom","2px solid #FFF");
     tr.append("<td width='15%'><div class='clientimage'><img src='../../../../conf_images/boards/" + json[i].ClientImageName + "'></></div></td>");
      tr.append("<td width='33%'><div class='clientname-text'>" + json[i].ClientName + "</div></td>");
      tr.append("<td width='33%'><div class='roomname-text'>" + json[i].RoomName + "</div></td>");
      tr.append("<td width='33%'><div class='time-text'>" + json[i].RoomFromTime + " - " + json[i].RoomToTime + "</div></td>");

   $('table').append(tr);
  }
  });

}

get_data();
setInterval(get_data,10000)
});

提前为你的时间做很多事。

1 个答案:

答案 0 :(得分:1)

那是因为你正在使用append()。追加将数据附加到现有数据的末尾,它不会覆盖它。

您需要在每次重新加载之前销毁您的表,或者使用“html()”或“text()”填充表格单元格,因为它们将覆盖现有数据而不是“附加”它。