为何JavaScript可刷新但嵌入的PHP仅执行一次？求修复方案

为什么PHP代码只执行一次？ #

这是服务器端代码（PHP）和客户端代码（JavaScript）的执行时机差异导致的核心问题：

• PHP是在服务器处理页面请求阶段运行的，当页面最终发送到浏览器之前，所有嵌入在JS里的PHP代码就已经执行完毕，把结果直接替换成了静态文本。
• 你写在setInterval里的PHP代码，其实在页面第一次加载时就已经跑完了，生成了一个固定的$gameStatus值。之后浏览器里的JS定时器只是反复执行这段已经生成好的静态JS代码，根本不会再触发服务器端的PHP去查询数据库。
• 而Math.random()是客户端JS的原生方法，每次定时器触发都会在浏览器里重新计算，所以它的值能实时刷新。

举个直观的例子，你的代码最终发送到浏览器的JS会是这样（假设第一次查询到的status是"playing"）：

setInterval(function refresh(){ 
  var value = "playing"+Math.round(Math.random()*100);
  $('#target').addClass('hidden');
  $('#target').html(value);
  $('#target').removeClass('hidden');
} , 1500);

你看，PHP代码已经完全消失，只剩下固定的"playing"字符串，所以不管数据库里的状态怎么变，这个值都不会更新。

怎么解决？ #

你需要用AJAX（异步请求），让客户端JS定期向服务器发送请求，主动获取最新的游戏状态。具体步骤如下：

1. 单独写一个PHP接口文件（比如get_game_status.php），专门用来查询数据库并返回最新状态：

<?php
session_start();
// 确保这里有正确的数据库连接（可以复用你原有的$link，或者重新建立连接）
$safeGameNumber = $_SESSION['gamenumber'];
// 先验证游戏编号的合法性，防止SQL注入风险（比如限制为数字）
if (!ctype_digit($safeGameNumber)) {
    die("Invalid game number");
}
$tableName = "gameStatus" . $safeGameNumber;
$query = "select * from $tableName";
$result = mysqli_query($link, $query);
if ($result && $row = mysqli_fetch_row($result)) {
    list($id, $status) = $row;
    echo $status;
} else {
    echo "Unknown status";
}
?>

2. 修改原来的JS代码，用jQuery的$.ajax（或原生JS的fetch）在定时器里请求这个接口：

<script>
setInterval(function refresh(){ 
  // 发送AJAX请求获取最新状态
  $.ajax({
    url: 'get_game_status.php',
    type: 'GET',
    success: function(gameStatus) {
      var value = gameStatus + Math.round(Math.random()*100);
      $('#target').addClass('hidden');
      $('#target').html(value);
      $('#target').removeClass('hidden');
    },
    error: function() {
      // 可选：添加请求失败时的提示逻辑
      $('#target').html("Failed to load status");
    }
  });
} , 1500);
</script>

额外注意事项 #

• 一定要处理SQL注入风险：直接拼接表名存在安全隐患，所以必须先验证gamenumber的合法性（比如限制为纯数字）。
• 可以考虑给AJAX请求添加防抖或调整定时器间隔，避免过于频繁地请求服务器造成压力。
• 确保get_game_status.php里的数据库连接逻辑正确，并且处理了查询失败的情况。

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