重新加载jQuery AJAX会复制JSON输出结果

Reloading jQuery AJAX duplicates JSON output results

本文关键字：复制 JSON 输出 结果 AJAX jQuery 新加载 加载      更新时间：2023-09-26

摘要

我正试图循环遍历一个由CORS AJAX调用返回的JSON结果。AJAX调用需要每xxx秒刷新一次，因为它是实时数据的恒定流。

代码示例

var seconds = 2000; // time in milliseconds
var reload = function() {
$.ajax({
    type: "GET",
    url: streamUrl,
    contentType: "application/json",
    cache: false,
    success: function(data) {
         for (var i in data) {
               $("#stream").append("<div class='post'><div class='streamText'>" + data[i].keymessage + "</div>" + "<div class='streamUser'>" + data[i].username + "</div></div>")
            }
            setTimeout(function() {
                reload();
            }, seconds);
        }
    });
 };
 reload();

问题

提供的示例代码确实刷新了代码，但是，它只是将刷新的新结果与旧结果一起堆叠在以前的旧结果之上。我需要它来用新的结果刷新旧的结果。

问题示例

重新加载前的结果

Bob: Hello
Steve: Hey Bob

重新加载后的结果

Sarah: Whats up guys
Bob: Hello
Steve: Hey Bob
Bob: Hello
Steve: Hey Bob

重新加载后的结果(我需要它做什么。(

Sarah: Whats up guys
Bob: Hello
Steve: Hey Bob

试试这个：只有一行更改，但因为您正在追加它，所以只会不断追加新代码。在循环开始时，移除流id元素的内容。

这样，它可以删除以前的项目，并允许您添加新项目。当再次调用时，它将重复自身。

 success: function(data) {
                 $("#stream").html("");
                 for (var i in data) {
                       $("#stream").append("<div class='post'><div class='streamText'>" + data[i].keymessage + "</div>" + "<div class='streamUser'>" + data[i].username + "</div></div>")
                    }
                    setTimeout(function() {
                        reload();
                    }, seconds);
                }
            });
相关文章：