如何实现无页面刷新自动提交两个表单？现有代码仅提交第一个

问题原因 #

直接调用表单的submit()方法会触发页面跳转，第一个表单提交后浏览器会立即导航到目标地址，导致第二个表单的提交代码根本无法执行。要实现无刷新提交，必须通过AJAX异步请求发送表单数据，避免页面跳转。

解决方法 #

使用Fetch API（现代浏览器原生支持）异步提交两个表单的数据，具体实现如下：

修改后的完整代码 #

<form id="addToCart" action="http://my-website/cart/action.php">
  <input type="hidden" name="action" value="add" />
  <input type="hidden" name="itemNum" value="201" />
  <input type="submit" value="Submit request" />
</form>

<form id="buy" action="http://my-website/cart/action.php?action=buy" method="POST">
  <input type="submit" value="Submit request" />
</form>

<script>
// 封装通用表单提交函数
async function submitForm(formId) {
  const form = document.getElementById(formId);
  if (!form) return;

  // 自动收集表单所有字段数据
  const formData = new FormData(form);
  // 获取表单的提交地址和请求方法
  const actionUrl = form.action;
  const method = form.method || 'GET';

  try {
    const response = await fetch(actionUrl, {
      method: method,
      body: formData
    });
    // 可根据业务需求处理响应结果
    const result = await response.text();
    console.log(`表单${formId}提交结果:`, result);
  } catch (error) {
    console.error(`表单${formId}提交失败:`, error);
  }
}

// 触发两个表单的异步提交
submitForm('addToCart');
submitForm('buy');
</script>

代码说明 #

• FormData：自动读取表单内的所有输入字段，无需手动拼接请求参数，适配各种表单结构。
• Fetch API：异步发送HTTP请求，不会触发页面跳转，两个请求可并行执行，互不影响。
• 错误处理：通过try/catch捕获请求异常，方便调试和排查问题。

旧浏览器兼容方案 #

如果需要兼容IE等旧版浏览器，可将Fetch API替换为XMLHttpRequest，核心逻辑一致：

function submitForm(formId) {
  const form = document.getElementById(formId);
  if (!form) return;

  const formData = new FormData(form);
  const actionUrl = form.action;
  const method = form.method || 'GET';

  const xhr = new XMLHttpRequest();
  xhr.open(method, actionUrl);
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      console.log(`表单${formId}提交结果:`, xhr.responseText);
    } else {
      console.error(`表单${formId}提交失败:`, xhr.statusText);
    }
  };
  xhr.onerror = function() {
    console.error(`表单${formId}提交失败: 网络错误`);
  };
  xhr.send(formData);
}

submitForm('addToCart');
submitForm('buy');

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