PHP开发中如何实现不刷新页面即可更新变量？

实现原理 #

PHP是服务端脚本，仅在页面请求时执行一次，页面渲染完成后无法再主动更新前端内容。要实现无刷新更新，需要借助前端JavaScript定时拉取服务端最新数据，短轮询是你这个场景下最容易实现的方案。

具体实现步骤 #

• 第一步：新建独立的后端数据接口
  单独写一个PHP文件（例如命名为get_timer_seconds.php），专门用于返回最新的秒数值，避免冗余的页面渲染逻辑：

<?php
// 此处复用你原有连接数据库、查询秒数的逻辑
// 示例代码（请替换为你实际的数据库配置和查询语句）
$db = new mysqli('localhost', '数据库用户名', '数据库密码', '数据库名');
$result = $db->query("SELECT 你的秒数字段名 FROM 你的表名 WHERE 条件 LIMIT 1");
$seconds = $result->fetch_row()[0] ?? 0;

// 直接输出整数结果
echo (int)$seconds;
$db->close();
?>

• 第二步：前端页面添加定时更新逻辑
  在你原来显示秒数的页面中，给显示元素加个唯一ID，再添加JavaScript定时拉取逻辑：

<!-- 原有的秒数显示位置，加id属性 -->
当前秒数：<span id="seconds_val"><?php echo 你原来输出的初始秒数变量; ?></span>

<script>
// 页面加载完成后启动轮询
document.addEventListener('DOMContentLoaded', () => {
    const secondsEle = document.getElementById('seconds_val');
    // 每1秒拉取一次最新值，可根据实际需求调整间隔（单位：毫秒）
    setInterval(() => {
        fetch('get_timer_seconds.php')
            .then(res => res.text())
            .then(val => {
                // 校验是0-60的整数再更新
                const num = parseInt(val);
                if (!isNaN(num) && num >=0 && num <=60) {
                    secondsEle.textContent = num;
                }
            })
            .catch(err => console.log('数据拉取失败', err));
    }, 1000);
});
</script>

可选优化 #

如果对实时性要求极高、不想频繁发起请求，可以改用WebSocket方案，不过对于秒数统计场景，上述短轮询方案已经足够使用，实现成本更低。

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