php 表格 定时刷新 ajax 例子

PHP表格定时刷新的例子可以通过Ajax来实现。下面是一个简单的例子：

假设我们有一个包含学生信息的表格，我们要每隔一段时间从数据库中获取最新的学生信息，并用Ajax定时刷新表格。

HTML部分：

<table id="student_table">
    <tr>
        <th>学生ID</th>
        <th>学生姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
</table>

JavaScript部分：

<script>
    function refreshTable() {
        // 使用Ajax发送请求
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'get_students.php', true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                // 获取服务端返回的数据
                var students = JSON.parse(xhr.responseText);
                var table = document.getElementById('student_table');

                // 清空表格内容
                table.innerHTML = '';

                // 重新填充表格
                for (var i = 0; i < students.length; i++) {
                    var row = table.insertRow(i+1);
                    row.insertCell(0).innerHTML = students[i].id;
                    row.insertCell(1).innerHTML = students[i].name;
                    row.insertCell(2).innerHTML = students[i].age;
                    row.insertCell(3).innerHTML = students[i].gender;
                }
            }
        };
        xhr.send();
    }

    // 每隔5秒刷新表格
    setInterval(refreshTable, 5000);
</script>

PHP部分（get_students.php）：

<?php
// 假设从数据库中获取学生信息
$students = array(
    array('id' => 1, 'name' => '张三', 'age' => 20, 'gender' => '男'),
    array('id' => 2, 'name' => '李四', 'age' => 22, 'gender' => '女'),
    array('id' => 3, 'name' => '王五', 'age' => 21, 'gender' => '男')
);

// 返回JSON格式的数据
echo json_encode($students);
?>

上述代码中，JavaScript部分使用Ajax发送GET请求到`get_students.php`，然后在请求成功时，使用返回的学生信息重新填充表格。页面加载后通过`setInterval`函数每隔5秒自动执行一次`refreshTable`函数，实现定时刷新表格的效果。PHP部分用于模拟从数据库中获取学生信息，并将数据以JSON格式返回给JavaScript。