如何自动提交GET与POST两个表单？仅首个表单提交成功

问题根源：连续调用表单submit()时，第一个表单提交会触发页面导航，直接中断后续JavaScript代码的执行，导致第二个表单的提交逻辑根本没机会运行。

下面提供两种可行的解决方法：

方法一：用异步请求（Fetch API）提交 #

这种方式不会触发页面跳转，两个请求可以独立完成，推荐用于不需要页面跳转的场景。

// 提交第一个表单
const addToCartForm = document.getElementById('addToCart');
fetch(addToCartForm.action, {
  method: addToCartForm.method || 'GET',
  body: new FormData(addToCartForm)
});

// 提交第二个表单
const buyForm = document.getElementById('buy');
fetch(buyForm.action, {
  method: buyForm.method || 'GET',
  body: new FormData(buyForm)
});

如果需要保证先完成第一个请求再执行第二个（比如必须先添加到购物车再下单），可以用async/await控制顺序：

async function submitBothForms() {
  // 先提交添加到购物车的表单
  const addForm = document.getElementById('addToCart');
  await fetch(addForm.action, {
    method: addForm.method || 'GET',
    body: new FormData(addForm)
  });

  // 再提交购买表单
  const buyForm = document.getElementById('buy');
  await fetch(buyForm.action, {
    method: buyForm.method || 'GET',
    body: new FormData(buyForm)
  });
}

submitBothForms();

方法二：用隐藏iframe承载表单提交 #

通过将表单的target指向隐藏的iframe，提交时不会替换当前页面，从而让两个表单的提交逻辑都能执行。

<!-- 添加隐藏的iframe，用于承载表单提交 -->
<iframe name="hiddenSubmitFrame" style="display: none;"></iframe>

<form id="addToCart" action="http://my-website/cart/action.php" target="hiddenSubmitFrame">
  <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" target="hiddenSubmitFrame">
  <input type="submit" value="Submit request" />
</form>

<script>
  // 提交第一个表单
  document.getElementById('addToCart').submit();
  // 可选：添加小延迟避免并发请求冲突
  setTimeout(() => {
    document.getElementById('buy').submit();
  }, 100);
</script>

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