从 json 接收的 jQuery 刷新数据

jQuery refresh data received from json

本文关键字：jQuery 刷新 数据 json      更新时间：2023-09-26

我想从另一台服务器获取数据并将其显示在我的网站上。远程服务器使用 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元素。

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

尝试：

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

在附加新项目之前，请使用.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");
});

放：

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

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

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

用

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

或清除使用

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

使用 Jquery remove 

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

您可以删除包含数据元素并重新添加

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

相关文章：