NodeJS在线学习应用复制测验后无法正常跳转页面问题

URL参数来源 #

这个带testName的URL参数，是浏览器触发表单默认GET提交行为导致的。你的表单要么没显式设置method="POST"，要么虽然设置了但未阻止默认提交逻辑，浏览器自动把表单字段以GET查询参数的形式拼接到当前页面URL后，发起了GET请求，覆盖了AJAX的POST请求响应流程。

核心问题原因 #

1. 前端未阻止表单默认提交：AJAX请求和表单默认提交同时触发，浏览器的默认提交会强制刷新页面，中断AJAX的响应接收流程，导致前端几乎收不到服务器返回的响应，页面也无法执行AJAX回调里的跳转逻辑。
2. 后端POST路由响应不完整：如果数据库操作完成后，后端没有主动返回响应（比如漏掉res.send()/res.json()/res.redirect()），AJAX请求会一直处于挂起状态，前端超时后，表单的默认提交就会接管页面行为。
3. AJAX错误处理缺失：如果后端返回了错误状态码（比如500），前端未捕获错误回调，也会导致跳转逻辑不执行，而表单默认提交趁机触发。

具体修复步骤 #

前端修复 #

• 强制阻止表单默认行为：在表单的submit事件回调开头，必须调用event.preventDefault()，彻底禁用浏览器的默认提交逻辑，确保只有AJAX请求被触发：

  document.querySelector('#duplicate-form').addEventListener('submit', async (e) => {
    e.preventDefault(); // 关键：阻止默认提交
    // 后续AJAX请求逻辑
    const formData = new FormData(e.target);
    try {
      const res = await fetch('/duplicatetest/' + idTest, {
        method: 'POST',
        body: formData
      });
      const data = await res.json();
      if (data.success) {
        window.location.href = '/tests'; // 执行跳转
      }
    } catch (err) {
      console.error('提交失败:', err);
      // 这里可以添加错误提示
    }
  });
  

• 检查AJAX配置：确保请求方法为POST，Content-Type与后端接收格式匹配（比如用FormData则无需手动设置，后端用multer或express.urlencoded解析），同时添加完整的错误捕获逻辑。

后端修复 #

• 确保POST路由返回完整响应：数据库操作完成后，必须返回明确的响应，比如：

  // /duplicatetest.js POST路由示例
  router.post('/:idTest', async (req, res) => {
    try {
      // 复制测验、保存到数据库的逻辑
      const newTest = await Test.create({
        name: req.body.testName,
        description: req.body.description,
        // 其他复制的字段
      });
      // 返回JSON让前端跳转（推荐，适配AJAX请求）
      res.json({ success: true, message: '测验复制成功' });
    } catch (err) {
      console.error('复制失败:', err);
      res.status(500).json({ success: false, message: '复制失败' });
    }
  });
  

• 排查路由逻辑：确保POST路由没有意外跳转到GET路由（比如错误处理时的重定向），避免触发GET请求渲染原始数据。

额外验证 #

测试时打开浏览器开发者工具的Network面板，查看请求记录：如果同时出现POST和GET两个请求，说明表单默认提交未被阻止；如果只有POST请求但状态为pending，说明后端未返回响应。

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