如何刷新动态表而不刷新整个HTML页面

Question

我有一个从MySQL数据库显示的数据动态表。我的数据库服务器中的每一次更新。我想只刷新表每2秒，而不用刷新整个页面。如何才能做到这一点？请帮助如何做到这一点？我的表的部分是这样的：

<table id="getdata" border="0" align="left" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#CCFF00">Name</td>
    <td bgcolor="#CCFF00">Comment</td>
    <td bgcolor="#CCFF00">DatePosted</td>
  </tr>
</table>

Answer 1

您将需要使用客户端脚本语言如javascript以便能够刷新你的HTML页面上的某些内容。即使用非常普遍的库是jQuery的。

PHP

# ajax.php
$contents = '<table class="table table-hover">
    <thead>
        <tr>
            <th>Sound</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Bzzz Bzz</td>
        </tr>
    </tbody>
</table>';

echo json_encode($content);

HTML/Javascript

<button class="refresher">Refresh table</button>
<table id="table-to-refresh">
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

<script type="text/javascript">
$(document).ready(function () {
    $(document).on('click', '.refresher', function () {
        $.ajax({
            url: 'ajax.php',
            method: get,
            dataType: 'json',
            success: function(response) {
                $('#table-to-refresh').html(response);
            }
        });
    });
});
</script>

Additional reading

• jQuery Docs - Ajax

Answer 2

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#load_tweets').load('file.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds



</script>

在文件中把你的全HTML和PHP SQL代码像完整的代码由您生成表。

检查这个参考qazxsw POI

Answer 3

像一个指定的时间间隔使用Ajax：

http://www.9lessons.info/2009/07/auto-load-refresh-every-10-seconds-with.html

Answer 4

只是这样做：

$.ajax({
    url: 'your_url',
    method: get,
    data:
    {
        var1 : val1
    },
    success: function(response)
    {
        $('#getdata').html(response);       // it will update the html of table body
    }
});

控制器是这个样子： -

     $.ajax({
                contentType: contentType,
                dataType: dataType,
                type: type,
                url: urlGetsearch,
                data: '{textvalue: "' + $("#tableId").val() + '" }',

        success: function (textvalue) {

            $("#tableId").html(htmlData);
        },

    });
}