每 5 秒用 jQuery/Ajax 刷新一个表答案

【问题标题】：Refresh a table with jQuery/Ajax every 5 seconds每 5 秒用 jQuery/Ajax 刷新一个表
【发布时间】：2011-04-15 19:23:52
【问题描述】：

所以我有一个从数据库中提取信息的表，我想知道如何在不重新加载整个页面的情况下让它刷新其信息。

【问题讨论】：

答案就在问题中：添加一个脚本，每 5 秒使用 AJAX 重新加载表数据。谷歌的 setTimeout JavaScript 函数。
您的后端设置如何？您是否打算调用诸如getData.php?startID=1&endID=10 之类的脚本？

标签： php jquery ajax

【解决方案1】：

您需要一个显示您的表格的getTable.php 页面，仅此而已：没有页眉、页脚等。

PHP (getTable.php) - 这可以是任何服务器端代码（asp、html 等）

<?php
    echo '<table><tr><td>TEST</td></tr></table>';
?>

然后，在您的 JS 中，您可以使用 load() 方法轻松刷新表格：

HTML

<div id="tableHolder"></div>

JS

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

    function refreshTable(){
        $('#tableHolder').load('getTable.php', function(){
           setTimeout(refreshTable, 5000);
        });
    }
</script>

【讨论】：

非常感谢，即使在使用 ASP 时也可以使用（就像我的情况一样）
很好的回复。为了帮助澄清，1000 ms = 1 秒。所以： setTimeout(refreshTable, 5000); -- 每 5 秒刷新一次表格。
@Dutchie432 如何使用 asp 表进行设置？我不使用php。
@Pomster 代码完全相同，但您无需调用getTable.php，只需调用getTable.asp 或调用任何您的ASP 页面。你只需要让那个 ASP 页面创建你的表。
值得一提（对于像我这样的菜鸟），您需要将 jQuery 导入到中的 html 文件中，例如<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> 浪费了 10 分钟的时间！

【解决方案2】：

使用ajax，下面的例子是在jQuery中：

$(function() {
    var prevAjaxReturned = true;
    var xhr = null;

    setInterval(function() {
        if( prevAjaxReturned ) {
            prevAjaxReturned = false;
        } else if( xhr ) {
            xhr.abort( );
        }

        xhr = $.ajax({
            type: "GET",
            data: "v1="+v1+"&v2="+v2,
            url: "location/of/server/script.php",
            success: function(html) {
                 // html is a string of all output of the server script.
                $("#element").html(html);
                prevAjaxReturned = true;
           }

        });

    }, 5000);
});

success 函数假定您的服务器脚本输出要在 id 为 'element' 的元素中替换的 html。

【讨论】：

这个解决方案的“问题”是一旦加载完成它就不会启动计时器。换句话说，如果您的请求需要超过 5 秒才能返回，那么您将有重叠的 ajax 请求。我建议在发起新呼叫之前使用 .abort()。
@Dutchie 正确。我已经更新了答案以反映更强大的解决方案。 OP 和其他感兴趣的人应该阅读这个答案：stackoverflow.com/a/446626/697370 以限制 abort
或者，您可以使用下面我的答案，一旦 ajax 完成，它就会启动自动计时器。

【解决方案3】：

您应该有一个使用 Ajax / jQuery 返回信息和提取数据的页面。

<div class="result"></div>

setInterval(function() {

    $.get('table.php', function(data) {
      $('#result').html(data);
    });

}, 5000);

【讨论】：

这个解决方案的“问题”是一旦加载完成它就不会启动计时器。换句话说，如果您的请求返回时间超过 5 秒，您将有重叠的 ajax 请求。我建议在发起新呼叫之前使用.abort()。

【解决方案4】：

这是您可以使用的另一个选项。此解决方案使用IIFE，它优于 setInterval。您可以在上面的链接中阅读有关 IIFE 的更多信息。

JAVASCRIPT：

var $results = $('#results'),
    loadInterval = 5000;
(function loader() {
    $.get('script.php', function(html){
            $results.hide(200, function() {
                $results.empty();
                $results.html(html);
                $results.show(200, function() {
                    setTimeout(loader, loadInterval);
                });
            });
    });
})();

HTML：

<div id="results"></div>

【讨论】：

嗨，但我实际上不知道刷新表格的功能。
@Etienne Dupuis 我认为这是一个很好的例子来说明如何获取数据。
@Etienne Dupuis 对不起，我倾向于观察者的回答。我喜欢 setInterval() 诗 setTimeout();我不知道这种方法。

【解决方案5】：

setTimeout(function(){

      jqueryFunction(Args);

},100);

会起作用的...

100 = 100 毫秒

【讨论】：

【解决方案6】：

以下适用于 JQuery Datatables 1.10

`var tableName;
//Set AJAX Refresh interval.
$(function() {
    setReloadInterval(10);  //Refresh every 10 seconds. 
}

//Because function takes seconds we * 1000 to convert seconds to milliseconds.
function setReloadInterval(reloadTime) {
    if(reloadTime > 0)
        internalId = setInterval("reloadTable()", (reloadTime * 1000);
}

//Auto Refresh JQuery DataTable 
function reloadTable() {
    tableName.ajax.reload();
}

//Table defined...
$(document).ready(function () {
    tableName = $('#tableName').DataTable({
        "sAjaxSource": "/someUrl",
});`

【讨论】：