如何使用jQuery Ajax单次提交两个表单的数据？

步骤1：调整HTML结构 #

先替换掉两个表单各自的提交按钮，改用一个统一的提交按钮，避免重复触发提交：

<form id="form1">
  <input type="text" name="name">
</form>

<form id="form2">
  <input type="email" name="email">
</form>

<!-- 统一提交按钮 -->
<button id="submitBoth">提交所有数据</button>

步骤2：修改Ajax代码合并表单数据 #

有两种实用的方式合并两个表单的数据，按需选择即可：

方式一：直接拼接序列化字符串

利用serialize()返回的URL编码字符串，用&拼接两个表单的结果，写法简洁：

$("#submitBoth").click(function(e) {
  e.preventDefault(); // 阻止按钮默认跳转行为
  
  // 合并两个表单的序列化数据
  var combinedData = $("#form1").serialize() + "&" + $("#form2").serialize();
  
  $.ajax({
    url: '/submit_form_data.php',
    type: 'POST',
    data: combinedData, // 传入合并后的数据
    success: function(response) {
      // 处理服务器响应，比如提示提交成功
      console.log("数据提交成功", response);
    },
    error: function(xhr, status, error) {
      // 处理提交失败的情况
      console.error("提交失败", error);
    }
  });
});

方式二：合并序列化数组后转成对象

如果需要对表单数据做额外处理（比如字段校验、值转换），这种方式更灵活：

$("#submitBoth").click(function(e) {
  e.preventDefault();
  
  // 合并两个表单的序列化数组
  var formDataArray = $("#form1").serializeArray().concat($("#form2").serializeArray());
  
  // 将数组转成键值对对象
  var combinedData = {};
  $.each(formDataArray, function(index, item) {
    combinedData[item.name] = item.value;
  });
  
  $.ajax({
    url: '/submit_form_data.php',
    type: 'POST',
    data: combinedData,
    success: function(response) {
      console.log("数据提交成功", response);
    },
    error: function(xhr, status, error) {
      console.error("提交失败", error);
    }
  });
});

关键注意点 #

• 原代码中data: $("#form1").serialize();多了一个分号，属于语法错误，必须删除，否则脚本会执行失败。
• 服务器端可以直接通过$_POST['name']和$_POST['email']获取两个表单的字段值，无需修改后端逻辑。

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