0

我有一个 MySQL 数据库，每隔几分钟和几小时就会插入代表新新闻项目的新行。打开的浏览器如何接收这些新的新闻项目并放置在 HTML 表格的顶部？

在 HTML 表的顶部，它可以显示“x 个新项目”（x 会随着新项目的插入而定期更改），当单击时，新项目将作为新行放置在表的顶部。这就像大多数其他实时网络应用程序一样：twitter 搜索、disqus 评论、YT 评论、hckrnews。

我正在运行 LAMP 设置并乐于使用 HTML5、Jquery，但希望让事情变得简单、容易和无处不在。我不介意轮询服务器以获取更新，理想情况下希望用户可以选择打开或关闭轮询（或推送）。

4

2 回答 2

2

您可以每 X 秒或每分钟使用一次Ajax调用。然后使用 jQuery，您可以将新数据插入到现有表中。

伪代码：

  • 设置间隔 X 秒/分钟的 JavaScript 计时器。

  • 在每个间隔之后，使用 Ajax 向服务器发送一个请求。您可能需要一个参数，如 last id、last datetime 或类似的东西来告诉服务器哪些记录已经显示。

  • 获取响应并在表顶部动态插入新行，并使用responseData.length某处写入“X new items”。

更复杂的 Ajax 替代方案是实现 Comet，但我听说 PHP 和 Apache 有点困难（没有尝试）。

未经测试的例子： 

setInterval(function() {
    var currentRowsCount = $('#tableId tr').length - 1; // or ID or Date
    var table = $('#tableId');

    $.ajax({
        type: "POST",
        url: "some.php",
        data: { rows: currentRowsCount },
        dataType: "json"
    }).done(function( response ) {
        var data = $.parseJSON(response);

        $(data).each(function(key, value) {
            // add the new rows using any of the append, prepend, before or after methods
        })
    });
}, 60000); // 1 min
于 2013-04-19T11:11:39.113 回答
1

我在 jquery 中这样做是为了消息警报，但可以对其进行修改以轻松更新表行，将其用作在不逐行复制的情况下开发的概念。

<script>
        var messages = {
        endpoint: 'endpoint.php',
        interval: 5, // polling interval, seconds

        poll: function(){
            $.ajax({
                type: 'POST',
                url: messages.endpoint,
                data: {
                    'method': 'messages-poll'
                },
                success: function(data){
                    $(data).each(function(){
                        //Your table update functionality here
                    });

                    setTimeout(function(){
                        messages.poll();
                    }, messages.interval * 1000);
                },
                dataType: 'json'
            });
        }
    };

    messages.poll();
</script>
于 2013-04-19T11:24:36.530 回答