求助：jQuery AJAX实现表格追加数据库新增数据（长轮询遇阻）

Hey there! I get that getting long polling right when you're learning can be tricky—let's break this down step by step so you can get your table updating automatically whenever new data hits your database.

首先，理清楚长轮询的核心逻辑 #

Long polling works like this:

• 前端发送AJAX请求到服务器，索要新数据
• 如果没有新数据，服务器不会立刻响应，会持有连接等待，直到有新数据或者超时
• 服务器返回数据后（不管是新条目还是“无更新”信号），前端立刻发送下一次请求，持续等待后续更新
• 拿到新数据后，只把新行追加到现有表格，不用重新加载全部内容

第一步：完善你的PHP后端代码 #

我会假设你的数据库表有一个created_at时间戳字段（如果没有的话一定要加，这是追踪新数据的关键）。下面是完整的长轮询处理代码：

<?php
DEFINE('DB_USERNAME', 'root');
DEFINE('DB_PASSWORD', 'your_password'); // 替换成你的实际密码
DEFINE('DB_HOST', 'localhost');
DEFINE('DB_NAME', 'your_database'); // 替换成你的数据库名

// 连接数据库
$conn = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// 获取前端传来的上次查询时间戳（首次请求用初始值）
$lastTimestamp = isset($_GET['last_timestamp']) ? $_GET['last_timestamp'] : '1970-01-01 00:00:00';

// 设置超时时间（比如30秒），避免服务器一直持有连接
$timeout = time() + 30;

// 循环等待新数据或超时
while (time() < $timeout) {
    // 查询上次时间戳之后新增的数据
    $sql = "SELECT * FROM your_table_name WHERE created_at > ? ORDER BY created_at ASC";
    $stmt = $conn->prepare($sql);
    $stmt->bind_param("s", $lastTimestamp);
    $stmt->execute();
    $result = $stmt->get_result();
    
    // 如果找到新数据，以JSON格式返回
    if ($result->num_rows > 0) {
        $newData = [];
        while ($row = $result->fetch_assoc()) {
            $newData[] = $row;
        }
        header('Content-Type: application/json');
        echo json_encode([
            'success' => true,
            'data' => $newData,
            'last_timestamp' => $newData[count($newData)-1]['created_at'] // 更新时间戳为最新条目时间
        ]);
        $stmt->close();
        $conn->close();
        exit;
    }
    
    // 暂无新数据，休眠2秒减少服务器负载后再查询
    $stmt->close();
    sleep(2);
}

// 超时后返回无更新信号
header('Content-Type: application/json');
echo json_encode([
    'success' => true,
    'data' => [],
    'last_timestamp' => $lastTimestamp // 保持原时间戳用于下次请求
]);
$conn->close();
?>

第二步：前端AJAX + 表格追加逻辑 #

假设你的表格ID是#data-table，且有<tbody>用于存放数据行，下面是前端处理代码：

// 初始化时间戳（首次请求用初始值，也可以用表格最后一行的created_at时间）
let lastTimestamp = '1970-01-01 00:00:00';

// 发起长轮询的函数
function startLongPoll() {
    fetch(`your_php_script.php?last_timestamp=${encodeURIComponent(lastTimestamp)}`)
        .then(response => response.json())
        .then(data => {
            if (data.success && data.data.length > 0) {
                // 将新数据追加到表格
                const tableBody = document.querySelector('#data-table tbody');
                data.data.forEach(row => {
                    // 生成新行，根据你的表格列自定义内容
                    const newRow = document.createElement('tr');
                    newRow.innerHTML = `
                        <td>${row.id}</td>
                        <td>${row.column1}</td>
                        <td>${row.column2}</td>
                        <td>${row.created_at}</td>
                    `;
                    tableBody.appendChild(newRow);
                });
                // 更新时间戳为最新条目的时间
                lastTimestamp = data.last_timestamp;
            }
            // 立刻发起下一次轮询
            startLongPoll();
        })
        .catch(error => {
            console.error('轮询出错:', error);
            // 出错后等待5秒再重试
            setTimeout(startLongPoll, 5000);
        });
}

// 页面加载完成后启动轮询
window.addEventListener('load', startLongPoll);

避坑关键提醒 #

• 时间戳字段: 确保数据库表的created_at字段默认值设为CURRENT_TIMESTAMP，这样新增数据时会自动记录时间。
• 服务器超时: 不要让服务器无限持有连接，设置合理的超时时间（比如30秒）避免资源浪费。
• 休眠间隔: PHP里的sleep(2)能减少数据库查询频率，提升性能。
• 错误处理: 前端的重试逻辑能应对临时网络中断的情况。
• 避免全表刷新: 我们只追加新行，完全符合你“不重新填充整个表格”的需求！

内容的提问来源于stack exchange，提问作者wreckit