如何在外部JQuery文件中获取动态刷新的PHP Session变量值？

你遇到的核心问题是：首次加载页面时定义的全局correct_answer变量，在通过load()动态替换DOM后不会自动更新——因为动态加载的内容只是替换了页面的部分HTML，不会重新执行主PHP文件里的JS赋值代码。下面给你几个实用的解决思路：

方法1：把新值嵌入动态加载的DOM的data属性中 #

修改includes/practise.inc.php，在被加载的#test_main元素上添加一个存储正确答案的data属性：

<div id="test_main" data-correct-answer="<?php echo $_SESSION['correct_answer']; ?>">
  <!-- 这里是原来的动态内容 -->
</div>

然后在load()方法的回调函数里，读取这个data属性更新全局变量：

$(document).on('click', "#reload_btn", function() { 
  $("#test_main").load("includes/practise.inc.php #test_main > *", function() {
    // 加载完成后更新变量
    correct_answer = $("#test_main").data("correct-answer");
  });
});

这样每次点击刷新按钮，都会从新加载的DOM里拿到最新的正确答案。

方法2：直接在动态生成的按钮上绑定正确答案 #

如果只需要在点击yes-btn时用到这个值，可以直接把答案绑定到按钮的data属性上。修改practise.inc.php里的按钮生成代码：

<button id="yes-btn" data-correct="<?php echo $_SESSION['correct_answer']; ?>">Yes</button>
<button id="no-btn">No</button>

然后修改JS的点击事件，直接从按钮本身读取值：

$(document).on('click', "#yes-btn", function() {
  const correct_answer = $(this).data("correct");
  console.log(correct_answer); // 现在拿到的是最新值
  // 后续样式修改代码
  $(this).css({"background-color": "green", "color": "white"});
  $("#no-btn").css({"background-color": "red", "color": "white"});
});

这种方法不需要依赖全局变量，避免了全局变量更新不及时的问题。

方法3：通过AJAX单独请求最新的正确答案 #

如果需要在多个地方用到这个值，可以写一个简单的PHP接口返回最新的答案（比如get_correct_answer.php）：

<?php
session_start();
echo $_SESSION['correct_answer'];
?>

然后在刷新按钮的点击事件里，先请求这个接口拿到新值，再加载页面内容：

$(document).on('click', "#reload_btn", function() { 
  // 先获取最新答案
  $.get("get_correct_answer.php", function(newAnswer) {
    correct_answer = newAnswer;
    // 再加载页面内容
    $("#test_main").load("includes/practise.inc.php #test_main > *");
  });
});

这三种方法都能解决你遇到的动态更新问题，你可以根据自己的项目场景选择最合适的一种。

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