2

我以前在 stackoverflow 上解决了一个问题，但是我的项目的要求已经改变，所以我需要一个新的解决方案。总结一下，我有一个 getJSON 函数，它每 5 秒执行一次以读取 JSON 文件中的更改。我遇到的问题是正确输出数据。我希望数据输出一次，但每 5 秒更新一次，以防用户对 JSON 文件进行更改

这是我的代码

 <script type="text/javascript">
$.ajaxSetup({
    cache: false
});
setInterval(function() {
    $.getJSON('names.json', function(data) {
        for (var i in data) {
            $('#one').append(data[i]);
        }
    });
}, 5000);

</script>

这个 getJSON 函数允许我抓取 JSON 数据并将其附加到 div 的开头。然后我刷新函数，这样如果 JSON 数据发生变化，那么 div 中的数据也会发生变化。问题是数据每 5 秒重复一次。

15 秒后的意外结果

453545Beady little eyesLittle birds pitch by my doorstep
453545Beady little eyesLittle birds pitch by my doorstep
453545Beady little eyesLittle birds pitch by my doorstep

15秒后我想要的结果

453545Beady little eyesLittle birds pitch by my doorstep

如果我在脚本运行时更改 JSON 11 秒

"two": "Eyes"

我想在 15 秒后得到的结果

453545 Eyes Little birds pitch by my doorstep

而不是我在 15 秒后得到的实际结果

453545Beady little eyesLittle birds pitch by my doorstep
453545Beady little eyesLittle birds pitch by my doorstep
453545 Eyes Little birds pitch by my doorstep

这是我正在使用的 JSON 文件

{
  "one": "453545",
  "two": "Beady little eyes",
  "three": "Little birds pitch by my doorstep"
}

希望我已经尽可能清楚地说明了这一点

4

3 回答 3

6

很难解读您的问题，因为可能有两种不同的结果，您实际上正在尝试实现其中之一：

  • 仅显示最新的 JSON 结果（无更改历史记录）
  • 每次更改仅显示一个 JSON 结果（更改历史记录）

第一个很简单，如下：

无历史记录：在显示结果之前清除结果

在附加新收到的结果之前，您必须清除以前的结果。

<script type="text/javascript">

    $.ajaxSetup ({  
        cache: false  
    });  

    setInterval(function(){
        $.getJSON('names.json', function(data) {
            $('#one').empty();
            for(var i in data) {
                $('#one').append(data[i]);
            }
        });
    }, 5000);

</script>

更改历史记录：检测更改

保留变更历史有几种不同的方法：

  1. rogal111以某种方式总结了第一个。尽管他的解决方案可能不是最好的，尤其是当您生成的 JSON 的格式发生变化时，因为他的代码仅在 JSON 结果至少定义了这 4 个字段时才有效。如果其中任何一个缺少undefined将显示，如果添加了任何其他，则将被省略。

  2. Trinh Hoang Nhu提供了一个更动态的解决方案，它适用于任何 JSON 对象的属性。

  3. 第三种可能的解决方案是通过附加上次更改的时间戳 ( names.json/timestamp) 来调用您的 Ajax URL，如果服务器发现 JSON 之后发生了更改，它将发送对象，否则将发送一些默认对象（即false或null），这将表明没有做出任何改变...

于 2012-07-19T09:50:10.297 回答
0

只需添加到您的 JSONversion标记并在每次修改 JSON 时增加它：

{ 
  "version": 12323
  "one": "453545",
  "two": "Beady little eyes",
  "three": "Little birds pitch by my doorstep"
}

然后在附加之前的javascript检查version标记中：

<script type="text/javascript">
    var currentVersion=-1;
     $.ajaxSetup ({  

       cache: false  
    });  

   setInterval(function(){ $.getJSON('names.json', function(data) {

    if(data.version>currentVersion)
    {
      currentVersion=data.version;
      $('#one').append(data.one);
      $('#one').append(data.two);
      $('#one').append(data.three);
    }

   });

},5000);

</script>
于 2012-07-19T09:49:49.597 回答
0

添加一个 oldJson 与新的比较。只有当它们不同时，您才会退出。前任

var oldJSON = null;

function compareObject(a,b){//Simple comparision
   for (i in a){
       if (!(i in b) || a[i] != b[i]){
          return false;
       }
   }
   return true;
}

setInterval(function() {
    $.getJSON('names.json', function(data) {
        //do the comparision
        if (!compareObject(oldJSON, data)){
            for (var i in data) {
                $('#one').append(data[i]);
            }
        }
        oldJSON = data;; //Important
    });
}, 5000);
于 2012-07-19T09:57:26.933 回答