如何避免HTML页面刷新时重复提交表单？附代码问题排查

疑问1：如何验证存储答题时间的Cookie是否正常？ #

可以通过以下几种方式验证：

• 浏览器开发者工具查看
  打开浏览器开发者工具（F12），切换到「Application」（Chrome）或「存储」（Firefox）标签，找到「Cookies」选项，查看对应域名下是否存在timer Cookie，以及它的数值、过期时间是否符合预期。
• 前端代码调试打印
  在JS中添加读取Cookie的工具函数，直接打印验证：

  // 读取指定Cookie的工具函数
  function getCookie(name) {
      let value = "; " + document.cookie;
      let parts = value.split("; " + name + "=");
      if (parts.length === 2) return parts.pop().split(";").shift();
  }
  // 打印timer Cookie值
  console.log("当前timer Cookie值：", getCookie("timer"));
  

• 后端代码验证读取
  在PHP中直接读取Cookie并输出，确认后端能正常获取：

  if(isset($_COOKIE['timer'])){
      echo "后端读取到的timer值：".$_COOKIE['timer'];
  } else {
      echo "未读取到timer Cookie";
  }
  

• 检查Cookie设置格式
  注意设置Cookie的格式规范，你的代码中缺少路径属性（确保全站可访问），正确写法示例：

  document.cookie = `timer=${TotalSeconds}; path=/;`;
  

疑问2：为何标签后的echo输出$answered值为true，而初始设置为false？ #

核心原因是PHP与JS的执行顺序差异：
PHP是服务器端预执行语言，在页面发送到客户端之前就会执行所有PHP代码；而JS是客户端语言，只有页面加载完成后才会运行。

你的代码在JS的Tick函数中写了：

if(TotalSeconds==0){
    <?php $answered="true";?>
    document.cookie="timer="+TotalSeconds+"expires=Thu, 01 Jan 1970 00:00:00 UTC;";
}

这段PHP代码会在服务器渲染页面时直接执行，完全不会理会JS的if(TotalSeconds==0)条件——服务器根本不知道客户端的倒计时逻辑。因此不管倒计时是否结束，$answered都会被服务器强制设置为true，最终<body>后的echo $answered自然输出true。

额外问题修复建议 #

1. 解决页面刷新重复提交问题 #

采用PRG模式（Post/Redirect/Get）：表单提交后，后端执行数据库操作，然后重定向到当前页面，避免刷新时重复提交：

if (isset($_REQUEST["submitButton"]) || isset($_REQUEST["submitted"])){
    $answered="true";
    $updata=$_REQUEST["updata"];
    $timetaken = $_REQUEST['timetaken'];
    $upsql="UPDATE question_data SET answered='$answered', ansstr='$updata', timespnt='$timetaken' WHERE questionid='$questionid'";
    $conn->execute_query($upsql);  
    // 重定向到当前页面，消除刷新重复提交的隐患
    header("Location: ".htmlspecialchars($_SERVER['PHP_SELF']));
    exit;
}

同时将表单的method改为POST，避免参数暴露在URL中，更符合表单提交规范。

2. 修复答题时间记录问题 #

当前代码中$timetaken=6*$length-$time;是服务器端固定计算值，无法反映用户实际答题时长，正确做法：

• 在表单中添加隐藏字段用于传递答题时长：

  <input type="hidden" name="timetaken" value="" />
  

• 提交表单时，从前端计算实际答题时长并写入隐藏字段：

  form.addEventListener('submit', (e) => {
      clearTimeout(tId);
      form.querySelector('[name=submitted]').value = 'formsubmit';
      form.querySelector('[name=updata]').value = userchoice.toString();
      // 计算实际答题时长：总时长 - 剩余时长
      const totalTime = <?php echo $time;?>;
      const timeTaken = totalTime - TotalSeconds;
      form.querySelector('[name=timetaken]').value = timeTaken;
  });
  

• 后端从$_REQUEST['timetaken']中获取实际时长，再更新到数据库。

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