技术求助：实现phpMyAdmin数据库更新时仅刷表格或定时局部刷新

方案一：每2秒局部刷新指定表格 #

要实现仅刷新表格而非整个页面，需将表格生成逻辑抽为独立PHP接口，通过AJAX定时请求接口并更新页面中的表格容器。

步骤1：创建独立表格生成脚本（get_labours_table.php） #

把原页面中生成表格的PHP代码单独提取，作为AJAX请求的目标：

<?php
require './connect.php';

$sql = "SELECT * FROM labours";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    echo "<table border='2' width='100%' height='20%' style='text-align:center;font-size:50px;' id='table'>
          <tr><th>ID</th><th>NAME</th><th>WORK</th><th>SALARY</th></tr>";
    while($row = $result->fetch_assoc()) {
        echo "<tr><td>" . $row["id"]. "</td><td>" . $row["name"]. "</td><td>" . $row["work"]. "</td><td>". $row["salary"] . "</td></tr>";
    }
    echo "</table>";
} else {
    echo "0 results";
}
$conn->close();
?>

步骤2：修改主页面代码 #

主页面仅保留表格容器和AJAX定时刷新逻辑，不再直接生成表格：

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<div id='div1'>
    <!-- 表格将通过AJAX加载至此 -->
</div>

<script>
// 定义加载表格的函数
function loadTable() {
    $('#div1').load('get_labours_table.php');
}

// 页面加载完成后初始化表格，并每2秒刷新一次
$(document).ready(function() {
    loadTable();
    setInterval(loadTable, 2000);
});
</script>

方案二：数据库更新时自动刷新表格（实时触发） #

若要实现数据库数据更新时才刷新表格，可采用长轮询方式（适合轻量场景）：

步骤1：修改get_labours_table.php，添加更新时间检测 #

假设labours表已存在updated_at字段（若没有，需先添加该DATETIME类型字段，并在数据更新时自动同步该字段值）：

<?php
require './connect.php';

// 获取客户端传递的最后更新时间，默认值设为久远时间
$lastUpdated = isset($_GET['last_updated']) ? $_GET['last_updated'] : '1970-01-01 00:00:00';

// 查询最新数据更新时间
$sql = "SELECT MAX(updated_at) as latest_update FROM labours";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
$latestUpdate = $row['latest_update'] ?? '1970-01-01 00:00:00';

// 若无新数据，等待5秒后再次检查（长轮询核心逻辑）
if (strtotime($latestUpdate) <= strtotime($lastUpdated)) {
    sleep(5);
    $result = $conn->query($sql);
    $row = $result->fetch_assoc();
    $latestUpdate = $row['latest_update'] ?? '1970-01-01 00:00:00';
}

// 有新数据则返回表格HTML和最新更新时间
$response = [
    'latest_update' => $latestUpdate,
    'table_html' => ''
];

if (strtotime($latestUpdate) > strtotime($lastUpdated)) {
    $sqlData = "SELECT * FROM labours";
    $resultData = $conn->query($sqlData);
    
    if ($resultData->num_rows > 0) {
        $response['table_html'] .= "<table border='2' width='100%' height='20%' style='text-align:center;font-size:50px;' id='table'>
                                    <tr><th>ID</th><th>NAME</th><th>WORK</th><th>SALARY</th></tr>";
        while($rowData = $resultData->fetch_assoc()) {
            $response['table_html'] .= "<tr><td>" . $rowData["id"]. "</td><td>" . $rowData["name"]. "</td><td>" . $rowData["work"]. "</td><td>". $rowData["salary"] . "</td></tr>";
        }
        $response['table_html'] .= "</table>";
    } else {
        $response['table_html'] = "0 results";
    }
}

echo json_encode($response);
$conn->close();
?>

步骤2：修改主页面AJAX逻辑，实现长轮询 #

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<div id='div1'>
    <!-- 表格将通过AJAX加载至此 -->
</div>

<script>
let lastUpdated = '1970-01-01 00:00:00';

function checkForUpdates() {
    $.getJSON('get_labours_table.php', {last_updated: lastUpdated}, function(response) {
        // 有新内容则更新表格
        if (response.table_html) {
            $('#div1').html(response.table_html);
            lastUpdated = response.latest_update;
        }
        // 立即发起下一次请求，保持长连接
        checkForUpdates();
    }).fail(function() {
        // 请求失败时延迟3秒重试
        setTimeout(checkForUpdates, 3000);
    });
}

// 页面加载完成后启动长轮询
$(document).ready(function() {
    checkForUpdates();
});
</script>

这种方式仅在数据库数据真正更新时才刷新表格，避免了不必要的重复请求。

内容的提问来源于stack exchange，提问作者HARSH J.