如何在不刷新页面的情况下自动提交两个表单？

Answer 1

按优先顺序

1. 提交所有数据以执行操作，然后添加并购买
2. 使用ajax，在第一次提交成功后提交第二个表单

   const url = "https://my-website/cart/action.php";
   document.getElementById("container").addEventListener("click", e => {
     const itemNum = e.target.dataset.itemnum;
     fetch(url, {
         method: "post",
         headers: {
           'Accept': 'application/json',
           'Content-Type': 'application/json'
         },
   
         //make sure to serialize your JSON body
         body: JSON.stringify({
           action: "add",
           itemNum: itemNum
         })
       })
       .then(() => {
         fetch(url, {
           method: "post",
           headers: {
             'Accept': 'application/json',
             'Content-Type': 'application/json'
           },
   
           //make sure to serialize your JSON body
           body: JSON.stringify({
             action: "buy",
             itemNum: itemNum
           })
         })
       })
   });
   

   <div id="container">
     <input type="button" data-itemnum="201" value="Buy 201 with one click " />
     <input type="button" data-itemnum="202" value="Buy 202 with one click " />
     <input type="button" data-itemnum="203" value="Buy 203 with one click " />
   </div>
   

   3. 两个 iframe（不要更改字段或方法，只更改操作的值）：

    <form id="addToCart" method="post" action="http://my-website/cart/action.php" target="iframe1">
      <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" method="POST"  target="iframe2">>
      <input type="hidden" name="action" value="buy" />
      <input type="hidden" name="itemNum" value="201" />
      <input type="submit" value="Submit request" />
    </form>
   <iframe name="iframe1"></iframe>
   <iframe name="iframe2"></iframe>
    <script> 
       document.forms[0].submit();
       setTimeout(() => document.forms[1].submit(),2000);
    </script>
    
   

Answer 2

这将是我的方法。使用 jquery ajax 为每个表单定义一个.submit() 函数（提交时遵循的过程）。使用.click() 以编程方式“单击”两个提交按钮。然后使用return false 防止页面刷新。这应该同时提交两个表格。如果没有 php 操作，我无法对此进行测试。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="addToCart" action="http://my-website/cart/action.php" method="get">
    <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>
    $(document).ready(function() {
        const $addToCartForm = $("#addToCart");
        const $buyForm = $("#buy");
        const addToCartUrl = $("#addToCart").attr("action");
        const buyUrl = $("#buy").attr("action");
        $buyForm.submit(function() {
            $.ajax({
                url: buyUrl,
                type: $buyForm.attr("method"),
                data: $buyForm.serialize()
            });
            return false;
        });
        $addToCartForm.submit(function() {
            $.ajax({
                url: buyUrl,
                type: $addToCartForm.attr("method"),
                data: $addToCartForm.serialize()
            });
            return false;
        });

        $addToCartForm.find("[type='submit']").click();
        $buyForm.find("[type='submit']").click();
    });
</script>

Answer 3

您可以使用 AJAX 和 JQuery $.post() 方法同时提交两个表单。

$(document).ready(main);

function main(){
    submitFormUsingAjax('#addToCart');
    submitFormUsingAjax('#buy');
}

function extractInputDataOfFromRef(formSelector){
  var $inputRefs = $(formSelector +' input:not([type=submit])');
  var data = {};
  $inputRefs.each(function($index){
    var name = $(this).attr("name");
    var value = $(this).attr("value");
    data[name] = value;
  })
  return data;
}

function submitFormUsingAjax(formSelector){
  var $formRef = $(formSelector);
  var url = $formRef.attr('action');
  var data = extractInputDataOfFromRef(formSelector);
  var method = $formRef.attr('method');
  method = method && method.toUpperCase();
  var posting;
  if(method == 'GET'){
     posting = $.get(url,data);
  }else{
    posting = $.post(url,data)
  }
  posting.done(function(response) {
    console.log("form submitted: ",response);
  });
  posting.fail(function(error) {
    console.log("form submittion failed:",error.statusText);
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="addToCart" action="http://my-website/cart/action.php" method="get">
   <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>

Answer 4

document.forms[0].onsubmit = (e) => {
    e.preventDefault();
}