Question

好吧，所以我觉得这里有点蠢...但我一直遇到AJAX从PHP编码的JSON页面获取数据的问题。在弄清楚PHP代码和jQuery代码的正确组合后，我现在有了一个正在运行的产品......几乎！

这里的问题是在不重复现有数据的情况下填充新结果。我知道这是因为我正在使用tr.append方法。

这是doof部分：

我不知道从JSON页面迭代行的正确方法，但不要在每次检查时重复结果，或者如何将我的代码“翻译”为。

以下是PHP代码：

$sth = mysql_query("SELECT * FROM incidents2014 ORDER by id DESC LIMIT 5");
$rows = array();
while($r=mysql_fetch_assoc($sth)){
  $rows[]=$r;
}
$b=json_encode($rows, JSON_HEX_TAG);
echo $b;

JSON输出：

[{"id":"1","date":"date1","time":"time1","city":"city1","fire":"fire1","addy":"addy1","level":"level1","desc":"desc1","ipaddress":"ip1","who":"who1","last_update":"lu1","RSS_time":"rss1","lat":"","lng":""},
{"id":"2","date":"date2","time":"time2","city":"city2","fire":"fire2","addy":"addy2","level":"level2","desc":"desc2","ipaddress":"ip2","who":"who2","last_update":"lu2","RSS_time":"rss2",lat":"","lng":""},

etc...]

jQuery代码：

$(document).ready(function get(){
  $.getJSON('jsontest1.php',
  function (json){
    var tr;
    for (var i = 0; i < json.length; i++){
      tr = $('<tr/>');
      tr.append("<td id='id'>" + json[i].id + "</td>");
      tr.append("<td id='date'>" + json[i].date + "</td>");
      tr.append("<td id='time'>" + json[i].time + "</td>");
      tr.append("<td id='city'>" + json[i].city + "</td>");
      tr.append("<td id='fire'>" + json[i].fire + "</td>");
      tr.append("<td id='level'>" + json[i].level + "</td>");
      tr.append("<td id='desc'>" + json[i].desc + "</td>");
      tr.append("<td id='addy'>" + json[i].addy + "</td>");
      tr.append("<td id='who'>" + json[i].who + "</td>");
      $('table').append(tr);
    }
  });
  }
//  setInterval(get,3000);
});

结果看起来像，但是上面这些行的分组会重复3秒（如果没有注释）。

我很感激任何和所有帮助!!!

谢谢!!! - 蒂姆

Answer 1

使用setInverval，它只是继续重复你的ajax调用，你的成功函数将继续像你告诉它的那样每3秒追加一次。你需要进行某种检查，无论你的表是否已经拥有该行。您可以将id作为检查的方式放入tr ...然后，如果文本已经存在，您可以更新文本，如果不存在，则可以附加文本。此外，我将您的ID更改为类，因为它们将被多次使用

$(document).ready(function get(){
$.getJSON('jsontest1.php',
function (json){
var tr;
for (var i = 0; i < json.length; i++){
  var tr = $('#+'json[i].id);
  if(tr.length){
    tr.find('.id').text(json[i].id);
    tr.find('.date').text(json[i].date);
    tr.find('.time').text(json[i].time);
    tr.find('.city').text(json[i].city);
    tr.find('.fire').text(json[i].fire);
    tr.find('.level').text(json[i].level);
    tr.find('.desc').text(json[i].desc);
    tr.find('.addy').text(json[i].addy);
    tr.find('.who').text(json[i].who);
   }
  else {
    tr = $('<tr id='+json[i].id+'/>');
    tr.append("<td class='id'>" + json[i].id + "</td>");
    tr.append("<td class='date'>" + json[i].date + "</td>");
    tr.append("<td class='time'>" + json[i].time + "</td>");
    tr.append("<td class='city'>" + json[i].city + "</td>");
    tr.append("<td class='fire'>" + json[i].fire + "</td>");
    tr.append("<td class='level'>" + json[i].level + "</td>");
    tr.append("<td class='desc'>" + json[i].desc + "</td>");
    tr.append("<td class='addy'>" + json[i].addy + "</td>");
    tr.append("<td class='who'>" + json[i].who + "</td>");
    $('table').append(tr);
  }
}
});
}
setInterval(callAjax,3000);
});

Answer 2

尝试这样的事情：

$(document).ready(function get(){
var check = 0;
$.getJSON('jsontest1.php',
function (json){
var tr;
if(check != json[i].id){
for (var i = 0; i < json.length; i++){
  tr = $('<tr/>');
  tr.append("<td id='id'>" + json[i].id + "</td>");
  tr.append("<td id='date'>" + json[i].date + "</td>");
  tr.append("<td id='time'>" + json[i].time + "</td>");
  tr.append("<td id='city'>" + json[i].city + "</td>");
  tr.append("<td id='fire'>" + json[i].fire + "</td>");
  tr.append("<td id='level'>" + json[i].level + "</td>");
  tr.append("<td id='desc'>" + json[i].desc + "</td>");
  tr.append("<td id='addy'>" + json[i].addy + "</td>");
  tr.append("<td id='who'>" + json[i].who + "</td>");
  $('table').append(tr);
  check = json[i].id;
}
}
});
}
setInterval(get,3000);
});

Answer 3

您可以检查最后一个ID并将其发送到php以获取大于该值的所有记录。

JS：

$(document).ready(function get(){
      latestID = $('table tr:last td:first').text();
      $.getJSON('jsontest1.php?id='+latestID,
      function (json){
        var tr;
        for (var i = 0; i < json.length; i++){
          tr = $('<tr/>');
          tr.append("<td id='id'>" + json[i].id + "</td>");
          tr.append("<td id='date'>" + json[i].date + "</td>");
          tr.append("<td id='time'>" + json[i].time + "</td>");
          tr.append("<td id='city'>" + json[i].city + "</td>");
          tr.append("<td id='fire'>" + json[i].fire + "</td>");
          tr.append("<td id='level'>" + json[i].level + "</td>");
          tr.append("<td id='desc'>" + json[i].desc + "</td>");
          tr.append("<td id='addy'>" + json[i].addy + "</td>");
          tr.append("<td id='who'>" + json[i].who + "</td>");
          $('table').append(tr);
        }
      });
      }
      setInterval(callAjax,3000);
    });

PHP：

$sth = mysql_query("SELECT * FROM incidents2014 WHERE id > ".$_GET['id']." ORDER by id DESC LIMIT 5");
$rows = array();
while($r=mysql_fetch_assoc($sth)){
  $rows[]=$r;
}
$b=json_encode($rows, JSON_HEX_TAG);
echo $b;

其他的做法是你可以通过我在这里找到的isInArray函数的一些帮助来检查frontEnd中的所有数据：How do I check if an array includes an object in JavaScript?

var IDs = [];
  $('table tr').each(function(){
      IDs.push($(this).find('td:first').text());
  });

  $.getJSON('jsontest1.php',
          function (json){
            var tr;
            for (var i = 0; i < json.length; i++){
              if(!isInArray(IDs, json[i].id)){
                  tr = $('<tr/>');
                  tr.append("<td id='id'>" + json[i].id + "</td>");
                  tr.append("<td id='date'>" + json[i].date + "</td>");
                  tr.append("<td id='time'>" + json[i].time + "</td>");
                  tr.append("<td id='city'>" + json[i].city + "</td>");
                  tr.append("<td id='fire'>" + json[i].fire + "</td>");
                  tr.append("<td id='level'>" + json[i].level + "</td>");
                  tr.append("<td id='desc'>" + json[i].desc + "</td>");
                  tr.append("<td id='addy'>" + json[i].addy + "</td>");
                  tr.append("<td id='who'>" + json[i].who + "</td>");
              }
              $('table').append(tr);
            }
          });
          }
     setInterval(callAjax,3000);});

使用jQuery从PHP获取JSON而无需附加

3 个答案: