Question

我有这个javascript函数，它向外部PHP脚本提供AJAX请求，如果新检查与旧检查不同，我希望自动更新HTML <div>。

<script>
window.setInterval(function()
{
  $(function () 
  {
    $.ajax({                                      
        url: 'api.php', data: "", dataType: 'json',  success: function(rows)        
        {
            for (var i in rows)
            {
                var row = rows[i];          
                var id = row[0];
                var vname = row[1];
                var Password = row[2]
                $('#output').append("<hr />").append("<b>id: </b>"+id+"<b> name: </b>"+vname+" <b>Password: </b>"+Password);
            } 
        } 
    });       
  });
 }, 5000);
  </script>

这当前成功返回并使用数组中的内容更新div，问题是，因为添加window.setInterval(function()行，它将每隔5秒为连接提供服务并更新<div>重复数据..当我想要的时候，它为了回应新数据（如果有一个ny）

这是我的其他PHP脚本：

$STD = new mysqli ("localhost", "root", "hidden", "ajaxrequests");

        $array = array(); 
    $Query = $STD->prepare ("SELECT * FROM ajaxdata");
    $Query->execute();
    $Query->bind_result($ID, $Name, $Password);

    while ($Query->fetch())
    {
        $array[] = array ( $ID, $Name, $Password);
    }

  echo json_encode($array);

Answer 1

只需在循环前添加对empty()的调用。

<script>
window.setInterval(function()
{
  $(function () 
  {
    $.ajax({                                      
        url: 'api.php', data: "", dataType: 'json',  success: function(rows)        
        {
            $('#output').empty();
            for (var i in rows)
            {
                var row = rows[i];          
                var id = row[0];
                var vname = row[1];
                var Password = row[2]
                $('#output').append("<hr />").append("<b>id: </b>"+id+"<b> name: </b>"+vname+" <b>Password: </b>"+Password);
            } 
        } 
    });       
  });
 }, 5000);
 </script>

当然，如果您的数据量很大，这将不是最佳选择。我实际上建议让PHP服务器发送带有响应的时间戳值。然后，您可以在后续的AJAX请求中将其传回，并让服务器确定自上次时间戳以来是否确实存在要传递的更新。然后，您可以让服务器仅发送这些更新的记录，您可以附加/更新这些记录，类似于您已经执行的操作。

内容更改时自动刷新JS数组？

1 个答案: