求助：通过jQuery Ajax实现PHP管理页无刷新同步数据库数据

算力阿峰

2026-7-12

问题分析

你之前尝试的Ajax触发PHP页刷新的方案无效，核心原因是：HTML页发送的Ajax请求收到的Refresh响应头，只会作用于这个Ajax请求本身，和浏览器中打开的PHP管理页面是完全独立的上下文，所以管理页不会被刷新。

下面提供两种无需手动/定时刷新，就能让管理页实时获取新数据的方案：

方案一：Server-Sent Events（SSE，轻量级单向推送）

SSE是HTML5原生特性，适合这种"服务器主动推数据给客户端"的单向场景，实现比WebSocket简单。

1. 后端新增SSE处理脚本（`events.php`）

<?php
// 设置SSE相关响应头
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header('Connection: keep-alive');

// 封装获取最新数据的函数（替换成你的实际数据库查询逻辑）
function getLatestData() {
    $conn = new mysqli('localhost', '数据库用户名', '数据库密码', '数据库名');
    // 示例：获取最新10条数据，按ID倒序
    $result = $conn->query("SELECT * FROM 你的表名 ORDER BY id DESC LIMIT 10");
    $dataList = [];
    while ($row = $result->fetch_assoc()) {
        $dataList[] = $row;
    }
    $conn->close();
    return $dataList;
}

// 首次连接时先发送一次现有数据
$initialData = getLatestData();
echo "data: " . json_encode($initialData) . "\n\n";
flush();

// 持续监听数据库变化（这里用定时检查，可优化为对比最后更新时间）
$lastCheckTime = time();
while (true) {
    sleep(2); // 每2秒检查一次
    $newData = getLatestData();
    // 推送最新数据给客户端
    echo "data: " . json_encode($newData) . "\n\n";
    flush();
}

2. 改造PHP管理页的前端部分

<!DOCTYPE html>
<html>
<head>
    <title>管理面板</title>
</head>
<body>
    <div id="data-display"></div>

    <script>
        // 建立SSE连接
        const eventSource = new EventSource('events.php');
        
        // 接收服务器推送的新数据，更新页面
        eventSource.onmessage = function(e) {
            const dataList = JSON.parse(e.data);
            let displayHtml = '';
            dataList.forEach(item => {
                // 替换成你的数据渲染逻辑，比如展示内容字段
                displayHtml += `<div class="data-item">${item.content}</div>`;
            });
            document.getElementById('data-display').innerHTML = displayHtml;
        };

        // 处理连接错误
        eventSource.onerror = function(e) {
            console.error('SSE连接异常:', e);
            eventSource.close();
        };
    </script>
</body>
</html>

3. HTML提交页无需额外改造

数据提交存入数据库后，SSE后端会自动检测到新数据并推送给管理页，无需手动触发。

方案二：WebSocket（双向实时通信）

适合需要双向交互的场景，功能更强大，实现稍复杂。

1. 后端搭建WebSocket服务器（用Ratchet库）

首先通过Composer安装依赖：

composer require cboden/ratchet

创建WebSocket服务器脚本ws_server.php：

<?php
require __DIR__ . '/vendor/autoload.php';

use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;
use Ratchet\Server\IoServer;
use Ratchet\Http\HttpServer;
use Ratchet\WebSocket\WsServer;

class DataPushServer implements MessageComponentInterface {
    protected $connectedClients;

    public function __construct() {
        $this->connectedClients = new \SplObjectStorage;
    }

    // 客户端连接时触发
    public function onOpen(ConnectionInterface $conn) {
        $this->connectedClients->attach($conn);
        echo "新客户端连接：{$conn->resourceId}\n";
    }

    // 收到客户端消息时触发（这里用于接收提交页的通知，推送给所有管理页客户端）
    public function onMessage(ConnectionInterface $from, $msg) {
        foreach ($this->connectedClients as $client) {
            if ($client !== $from) {
                $client->send($msg);
            }
        }
    }

    // 客户端断开连接时触发
    public function onClose(ConnectionInterface $conn) {
        $this->connectedClients->detach($conn);
        echo "客户端断开：{$conn->resourceId}\n";
    }

    // 连接错误时触发
    public function onError(ConnectionInterface $conn, \Exception $e) {
        echo "连接错误：{$e->getMessage()}\n";
        $conn->close();
    }
}

// 启动WebSocket服务器，监听8080端口
$server = IoServer::factory(
    new HttpServer(
        new WsServer(
            new DataPushServer()
        )
    ),
    8080
);

$server->run();

2. 改造HTML提交页（提交数据后通知WebSocket服务器）

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" id="input-content" placeholder="输入内容">
    <button id="submit-btn">提交数据</button>

    <script>
        // 连接WebSocket服务器
        const ws = new WebSocket('ws://localhost:8080');

        $("#submit-btn").click(function() {
            const content = $("#input-content").val();
            // 提交数据到数据库
            $.ajax({
                url: 'save_data.php',
                type: 'POST',
                data: { content: content },
                success: function() {
                    // 通知WebSocket服务器有新数据
                    ws.send('new_data_arrived');
                }
            });
        });
    </script>
</body>
</html>

3. 改造PHP管理页（接收WebSocket通知，拉取新数据）

<!DOCTYPE html>
<html>
<head>
    <title>管理面板</title>
</head>
<body>
    <div id="data-display"></div>

    <script>
        const ws = new WebSocket('ws://localhost:8080');
        const displayContainer = document.getElementById('data-display');

        // 收到WebSocket通知后，拉取最新数据
        ws.onmessage = function(e) {
            if (e.data === 'new_data_arrived') {
                fetch('get_latest_data.php')
                    .then(res => res.json())
                    .then(dataList => {
                        let displayHtml = '';
                        dataList.forEach(item => {
                            displayHtml += `<div>${item.content}</div>`;
                        });
                        displayContainer.innerHTML = displayHtml;
                    });
            }
        };
    </script>
</body>
</html>

4. 补充两个辅助PHP接口

save_data.php：处理数据入库

<?php
$conn = new mysqli('localhost', '数据库用户名', '数据库密码', '数据库名');
$content = $_POST['content'];
$conn->query("INSERT INTO 你的表名 (content) VALUES ('$content')");
$conn->close();
echo 'success';
?>

get_latest_data.php：获取最新数据

<?php
header('Content-Type: application/json');
$conn = new mysqli('localhost', '数据库用户名', '数据库密码', '数据库名');
$result = $conn->query("SELECT * FROM 你的表名 ORDER BY id DESC LIMIT 10");
$dataList = [];
while ($row = $result->fetch_assoc()) {
    $dataList[] = $row;
}
$conn->close();
echo json_encode($dataList);
?>

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