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

您可以使用一些快速的方法。也许将成功数据存储在一个变量中，并在重写表之前检查它是否已更改。

ThatSteveGuy 的回答将是最正确的方法，但是，您可能需要从数据库中返回一个主键来实现它。

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

首先，一旦加载了 ajax 请求（有或没有错误），我将使用该setTimeout()函数，而不是使用该函数，这不考虑可能的连接问题/延迟。setInterval()

另外，我会让查询返回每条评论的时间戳，您可以稍后在您的 ajax 请求中发回最新的时间戳，以检索在该时间之后发布的评论。如果您的表中没有此数据，我肯定会将其添加为UTC_TIMESTAMP(). 这也可能对您的历史记录有用：

某人：嗨，怎么了？
（于 2012 年 10 月 11 日上午 6 点 48 分发送）

于 2012-10-11T03:49:30.493 回答