jQuery实现HTML表单无跳转提交失败，求解决方案

我来帮你排查下这个问题，你遇到的不跳转提交失败的情况，大概率是某些细节没处理到位，咱们一步步来解决：

一、最可靠的AJAX提交方案（含FormData） #

这种方法能确保所有表单字段（包括隐藏的token）都被正确传递，还支持文件上传场景：

// 获取目标表单元素
const targetForm = document.querySelector('form[action="apiCalls.php"]');

// 绑定表单提交事件
targetForm.addEventListener('submit', function(e) {
  // 第一步：阻止默认跳转行为，这是关键！
  e.preventDefault();

  // 序列化整个表单数据（自动包含所有input，包括hidden的token）
  const formData = new FormData(this);

  // 发送AJAX请求
  $.ajax({
    url: this.action,
    method: this.method,
    data: formData,
    processData: false, // 必须设置：避免jQuery自动处理FormData
    contentType: false, // 必须设置：让浏览器自动生成正确的Content-Type
    success: function(response) {
      console.log('提交成功:', response);
      // 这里可以添加成功后的交互逻辑，比如提示用户
    },
    error: function(xhr, status, error) {
      console.error('提交失败:', error);
      // 处理提交失败的情况，比如显示错误提示
    }
  });
});

二、简化版$.post提交方案 #

如果你的表单没有文件上传需求，可以用更简洁的$.post，但要确保正确序列化表单：

const targetForm = document.querySelector('form[action="apiCalls.php"]');

targetForm.addEventListener('submit', function(e) {
  e.preventDefault();
  
  // 使用jQuery的serialize()方法序列化表单数据
  $.post(this.action, $(this).serialize(), function(response) {
    console.log('提交成功:', response);
  }).fail(function(xhr, status, error) {
    console.error('提交失败:', error);
  });
});

三、你之前失败的常见原因排查 #

• 阻止默认行为时机错误：如果是直接调用form.submit()，再用preventDefault是无效的，必须在submit事件回调里先执行e.preventDefault()
• 表单数据未正确传递：如果手动拼接数据，可能漏掉了隐藏的token字段，用FormData或serialize()能避免这个问题
• jQuery未正确引入：检查浏览器控制台是否有$ is not defined的报错，若有，确保jQuery脚本在你的代码之前加载
• 后端脚本问题：打开浏览器开发者工具的「Network」面板，查看请求的状态码（比如404表示apiCalls.php路径错误，500表示PHP脚本内部报错），同时检查请求的Form Data里是否包含token字段

额外提示 #

如果还是无法解决，先打开浏览器控制台查看具体报错信息，这是定位问题最快的方式；另外也可以检查你的PHP脚本是否正确接收POST参数（比如用$_POST['token']获取值）。

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