jQuery刷新从JSON接收的数据

Question

我想从另一台服务器获取数据并将其显示在我的网站上。 远程服务器使用jsonp，所以我正在使用jQuery。 我的代码如下所示：

$.getJSON(json_url, function(data) {
  var items = [];
  $.each(data, function(key, val) {
    items.push("<li id=" + key + ">" + val + "</li>");
  });

  $( "<ul/>", {
    "class": "my-new-list",
    html: items.join("")
  }).appendTo("#my-id");
});

我想在一分钟后发出另一个请求，以检查是否有新数据，因此我可以使用setInterval(main, 60000)或类似的东西。

但是问题在于，当我获得新数据时，旧数据不会被清除。 因此，我将拥有具有新旧价值的li元素。

我应该如何更改代码，以清除旧数据？

Answer 1

尝试：

$("#my-id").html($( "<ul/>", {
    "class": "my-new-list",
    html: items.join("")
}));

Answer 2

在添加新项目之前，使用.empty()方法清除<ul> ：

$.getJSON(json_url, function(data) {
  var items = [];
  $.each(data, function(key, val) {
    items.push("<li id=" + key + ">" + val + "</li>");
  });

  $("#my-id").empty();

  $( "<ul/>", {
    "class": "my-new-list",
    html: items.join("")
  }).appendTo("#my-id");
});

Answer 3

放：

$("#my-id").empty();

在回调函数的开头。 .appendTo执行其名称所暗示的功能，它将附加到元素上，而不是替换内容。

Answer 4

您正在使用appendTo因此不会清除旧数据。

采用

 $("#my-id").html($( "<ul/>", {
  "class": "my-new-list",
  html: items.join("")
 }));

或清除使用

$("#my-id").html('')

Answer 5

使用jQuery删除

$("#my-id").remove();

您可以删除包含数据的元素并再次添加

Answer 6

只需在附加li项目之前清除ul 。 您可以使用$('ul-id').empty()或$('ul-id li').detach() 。