1

私が入力しているフィールドは、次のようなテーブルです。

<table class="history"></table>

jquery-ajax は次のようになります。

<script type="text/javascript">
    $(document).ready(function() 
    {

        function fetchComments()
        {
            $.ajax({
                    type: 'POST',
                    url: '/members/comment/fetch/',
                    dataType: "json",
                    timeout: 100,
                    success: function(data) 
                    {
                        $.each(data, function(i, data){
                             $(".history").append("<tr><td>" + data.member_id + "</td><td>" + data.comment + "</td></tr>");
                        })                          
                    }
            });
        }

        function clear()
        {
            $(".history").html('');
            fetchComments();

        }
        setInterval(clear, 1000);

    });
</script>

json を取得しているページ (/members/comment/fetch) は次のようになります。

[{"member_id":"2","comment":"horses--"},{"member_id":"2","comment":"kkk"},{"member_id":"2","comment":"sarmen22kkkkkkkkkkkkkj"},{"member_id":"2","comment":"sarmen22kkkkkkkkkkkkkj"},{"member_id":"2","comment":"sarmen22kk"},{"member_id":"2","comment":"sarmen22"},{"member_id":"2","comment":"sarmen"},{"member_id":"2","comment":"lklklk"},{"member_id":"1","comment":"this is admin"},{"member_id":"2","comment":"kkk"},{"member_id":"1","comment":"this is admin 2"},{"member_id":"2","comment":"kkk"}]

この json が作成される方法は、mysql のすべての行を読み取り、json 形式に出力することです。私が抱えている問題は、setinterval が json を毎秒再要求しており、データが取り込まれるテーブルが非常にぎくしゃくしており、データがスムーズに取り込まれないことです。テーブルがスムーズに作成されるようにするにはどうすればよいですか。これは、私が作成しているシンプルで小さなチャット アプリです。

ps: また、(何らかの方法で) ページを更新するため、長いデータ テーブルがあり、下にスクロールした場合、更新によりページが元に戻ります。

4

3 に答える 3

0

まず、setIntervalの反復ごとにすべてを消去してテーブルデータを再作成するのではなく、テーブルにのみ新しいデータを追加することから始めます。

于 2012-10-11T03:33:43.617 に答える
0

まず、接続の問題/遅延の可能性を考慮していない関数setTimeout()を使用する代わりに、 ajaxリクエストがロードされたら（エラーの有無にかかわらず）関数を使用します。setInterval()

また、クエリが各コメントのタイムスタンプを返すようにします。最新のコメントは後で ajax リクエストで送り返すことができ、その時間以降に投稿されたコメントを取得できます。テーブルにこのデータがない場合は、間違いなく として追加しますUTC_TIMESTAMP()。これは履歴にも役立ちます。

誰か:こんにちは、どうしたの?
(2012 年 10 月 11 日午前 6 時 48 分に送信)

于 2012-10-11T03:49:30.493 に答える
0

すぐに使える方法がいくつかあります。おそらく、成功データを変数に格納し、テーブルを書き直す前に変更されたかどうかを確認します。

ThatSteveGuy の答えが最も正しい方法ですが、データベースから主キーを返して実装する必要があるでしょう。

var lastData = "";
...
success: function(data) 
{
   if (data != lastData)
   {
     lastData = data;
     $(".history").html('');
     ... (foreach data populate the table)
   }
}
于 2012-10-11T03:39:55.700 に答える