从json收到的jQuery刷新数据

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

清除您的<ul>与.empty()方法追加新的项目，如在此之前：

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

就明确ul之后追加li项目。您可以使用$('ul-id').empty()或$('ul-id li').detach()。