使用 jQuery/Ajax 每 5 秒刷新一次表

php jquery ajax

2022-08-30 19:36:50

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

答案 1

您将需要一个显示表格的页面，而不是其他任何内容：没有页眉，页脚等。getTable.php

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

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

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

断续器

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

断续器

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

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

答案 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);
});

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