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

时间:2014-05-08 23:04:28

标签: javascript jquery ajax json

摘要

我正在尝试循环通过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

1 个答案:

答案 0 :(得分:2)

试试这个:只有一行更改,但因为你要附加它只是继续追加你的新代码。在循环开始时删除stream 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);
                }
            });