1

外部 PHP スクリプトへの AJAX リクエストを処理するこの JavaScript 関数があります<div>。新しいチェックが古いチェックと異なる場合は、HTML を自動更新する必要があります。

<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);
4

1 に答える 1

0

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 リクエストで返し、その最後のタイムスタンプ以降に配信する更新が実際にあるかどうかをサーバーに判断させることができます。次に、サーバーにそれらの更新されたレコードのみを送信させることができます。これは、既に行っている方法と同様に追加/更新できます。

于 2013-03-07T20:52:56.143 に答える