Auto Refresh JS Array при изменении содержимого?

Question

У меня есть эта функция javascript, которая служит для запроса AJAX для внешнего скрипта PHP, я хочу, чтобы это автоматически обновляло 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> с дублированием данных .. когда все, что я хочу, это для того, чтобы повторить новые данные (если есть пу)

Вот мой другой 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 отправит значение timestamp с его ответом. Затем вы можете передать это обратно в последующих запросах AJAX и определить сервер, действительно ли есть обновления для доставки с этой последней метки времени. Затем вы можете отправить сервер только эти обновленные записи, которые вы могли бы добавить/обновить, подобно тому, как вы это делаете.