使用 jQuery 从 PHP 获取 JSON 到表中而不附加

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 更改为 classes，因为它们将被多次使用

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

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

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 函数的一点帮助下检查前端的所有数据：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);});

Answer 3

试试这样的：

$(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);
});