AJAX関数をリフレッシュする（PHPを入手する）

Question

まず、私が1週間以内にコーディングしていたとしましょう。 PHPのJSONエンコードファイルをより読みやすいファイルに吐き出すAJAX呼び出しを使用してデータを更新するJavaScriptを作成しようとしています。

私は正常にHTMLテーブルにjsonを吐き出しましたが、私はこのデータを自動的にリフレッシュしたいので、データベースが変更されたときに自分のHTMLも更新されます。

$(document).ready(function(){ 

refresh(); 
}); 

function refresh() { 
setTimeout(function() { 
dbupdates(); 
refresh(); 
}, 500); 
} 

function dbupdates(){ 
$.ajax({ 
    url: 'fetchtest.php', 
    type: 'get', 
    dataType: 'JSON', 
    success: function(response){ 
// for loop to only write 10 
     for(var i=0; i<10; i++){ 
      var id01 = response[i].id1; 
      var id02 = response[i].id2; 
      var id03 = response[i].id3; 
// tr located in html 
      var tr_str = "<tr>" + 
       "<td align='center'>" + id01 + "</td>" + 
       "<td align='center'>" + id02 + "</td>" + 
       "<td align='center'>" + id03 + "</td>" + 
       "</tr>"; 
// table ID in html file 
      $("#HTMLTABLE").append(tr_str); 
     } 

    } 
}); 
}; 

私は、Webページを実行すると、それはそれだけで同じデータ（DB変更された場合、おそらく変化しない）の新しい10個のエントリのテーブルを作成し、無限ループに入ります。

私は正確になぜこれが起こるのか知っていますが、実際には10テーブルだけをリフレッシュするためにどのような機能を使用する必要がありますか？

おかげ

Answer 1

ません使用はappend（）HTMLに置き換える（）関数の使用が

<div id="HTMLTABLE"></div> 
<script> 
    $(document).ready(function(){ 

     refresh(); 
     }); 

     function refresh() { 
     setTimeout(function() { 
     dbupdates(); 
     refresh(); 
     }, 1500); 
     } 

     function dbupdates(){ 
     $.ajax({ 
      url: 'fetchtest.php', 
      type: 'get', 
      dataType: 'JSON', 
      success: function(response){ 
     // for loop to only write 10 
     var tr_str =''; 
       for(var i=0; i<response.length; i++){ 
        var id01 = response[i].id; 
        var id02 = response[i].name; 
        var id03 = response[i].salery; 
     // tr located in html 
        tr_str += "<tr>" + 
         "<td align='center'>" + id01 + "</td>" + 
         "<td align='center'>" + id02 + "</td>" + 
         "<td align='center'>" + id03 + "</td>" + 
         "</tr>"; 
     // table ID in html file 

       } 
      $("#HTMLTABLE").html(tr_str); 

      } 
     }); 
     }; 
</script>