在 Javascript/ajax 或 jquery 中提交多个表单

Posted 2023-02-24

技术标签:

【中文标题】在 Javascript/ajax 或 jquery 中提交多个表单【英文标题】：Submit more than one form in Javascript/ajax or jquery 【发布时间】：2017-09-03 07:04:54 【问题描述】：

这就是我想要做的我在一页中有 3 个表单，我需要这样做，因为在模式对话框中打开了一个表单，我希望在用户单击一个按钮时提交所有 3 个表单，也我想要一个 ajax 实现表单提交中的 sucess en error 函数

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>

var firstFormData = $("#form1").serialize();
var secondFormData = $("#form2").serialize();
var thirdFormData = $("#form3").serialize();


$.post(
    URL: test.php             
    firstFormData + secondFormData + thirdFormData
); 
</script>

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

<form id="form2">
<input type="text" name="two"></input>
</form>

<form id="form3">
<input type="text" name="three"></input>
</form>

<button>submit here</button>
<?php 

echo $_POST['one']; 
echo $_POST['two']; 
echo $_POST['three']; 

?>

【问题讨论】：

首先，您应该为提交按钮添加一个 onClick 处理程序。然后，您可以连接所有表单的序列化结果并发出 AJAX 请求。这与使用任何自定义数据的通常 AJAX 请求没有什么不同。 $.post 接受数据参数。您可以随心所欲地构建它。 api.jquery.com/jQuery.post 您的问题解决了吗？如果是这样，您应该通过接受答案来结束此问题。 【参考方案1】：

您也可以执行以下操作：

var combinedFormData = $("#form1,#form2,#form3").serialize();

这会将所有三种形式序列化为一个查询字符串。只需确保输入名称不重叠即可。

一个完整的实现应该是这样的：

<?php
      // PHP Code to return the html to be inserted in the #result div
      // Just for demonstration purposes.
      if (count($_POST) > 0) 
            echo "<p>You successfully posted:</p><ul>";
            foreach ($_POST as $key => $val) 
                    echo "<li>$key: $val</li>";
            
            echo "</ul>";
            exit;
      
?>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
    <form id="form1">
        <input type="text" name="one">
    </form>

    <form id="form2">
        <input type="text" name="two">
    </form>

    <form id="form3">
        <input type="text" name="three">
    </form>

    <button id="sendforms">Submit forms</button>

    <div id="result"></div>

    <script type="text/javascript">
        $(document).ready(function () 
          $("#sendforms").click(function() 
                   var combinedFormData = $("#form1,#form2,#form3").serialize();
                 $.post(
                        "test.php",
                        combinedFormData
                 ).done(function(data) 
                        alert("Successfully submitted!");
                        $("#result").html(data);
                 ).fail(function () 
                          alert("Error submitting forms!");
                 )
          );
        );
    </script>
  </body>
</html>

请注意，PHP 代码仅用于说明和测试。你不应该像这样实现你的表单处理，也不应该把它和你的表单放在同一个文件中。这都是糟糕的风格:-)

这是一个有效的 jsFiddle:https://jsfiddle.net/kLa1pd6p/

【讨论】：

没关系，但是当我在 php vars 中检索时 echo $_POST['one'];回声 $_POST['two'];回声 $_POST['三'];没有发布任何值我正在提交相同的 test.php 文件当然它什么也没显示。您正在那里执行异步 $.post 。这意味着页面永远不会重新加载，因此您的 PHP 脚本永远不会再次执行（在浏览器中）。该请求调用了 test.php 的第二个版本，但您不会在浏览器中看到结果。它可以在同一个页面上，但是你应该让它返回一些东西让脚本显示给用户。您将在回调中从服务器获取结果。我将编辑我的答案，等等…… 你可以try this，希望对你有帮助答案现在包括必要的 PHP 代码来返回一些 HTML 数据，然后将这些数据放入 .done 回调的 result-div 中。这应该给你一个想法......但是，将表单处理放在不同的文件中以保持干净。【参考方案2】：

您的实施几乎完成了。要连接表单，您应该使用&。

var firstFormData = $("#form1").serialize();
var secondFormData = $("#form2").serialize();
var thirdFormData = $("#form3").serialize();

$.post('test.php', firstFormData + "&" + secondFormData + "&" + thirdFormData)
    .done(function(data) 
        // success function
    ).fail(function() 
        // fail function
    );

要向按钮添加事件处理程序，您可以添加一个 id 并附加一个事件处理程序

<button id="submit-btn">Submit</button>

和事件处理程序

$('#submit-btn').on('click', function() 
    // do the ajax call
    var data = $('#form1,#form2,#form3');
    $.post('test.php', data).done(function(data) 
        alert(data);
    );
);

【讨论】：

当用户点击按钮时如何调用它？给按钮一个 id 或 class 并添加一个事件处理程序 - 我添加一个示例为什么有 2 个函数？这个文件是 test.php 我提交给编写代码的同一个文件，但它还没有工作两个函数是什么意思？最新的代码 sn-p 是你唯一需要做的请求 - 另一个只是你如何做的另一个例子【参考方案3】：

这也应该适合你：

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
$("#sub").on("click mousedown touchstart", function ()
var firstFormData = $("#form1").serialize();
var secondFormData = $("#form2").serialize();
var thirdFormData = $("#form3").serialize();

    $.ajax( 
        type: 'POST',
        url: 'test.php',
        data: 
                one: firstFormData,
                two: secondFormData,
                three: thirdFormData
              ,
        success: function(data) 
            console.log(data);
        
    ); 

);    

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

<form id="form2">
  <input type="text" name="two"></input>
</form>

<form id="form3">
  <input type="text" name="three"></input>
</form>

<button id="sub">submit here</button>

<?php 

  echo $_POST['one'];
  echo $_POST['two'];
  echo $_POST['three'];
?>

【讨论】：

不工作，我还需要一个成功和错误功能的实现我测试了我的文件是 test.php 我提交到同一个文件但是当我检索 vars 时，没有数据发送 echo $_POST['one'];回声 $_POST['two']; echo $_POST['three'];

以上是关于在 Javascript/ajax 或 jquery 中提交多个表单的主要内容，如果未能解决你的问题，请参考以下文章

如何使用 Vanilla JavaScript/Ajax 获取地理位置 - 国家和城市

Javascript Ajax 优雅降级，有不同的页面？

Javascript/AJAX POST 多部分/表单数据

在纯javascript ajax中捕获跨域响应[重复]

在vue中如何引jquer

自己动手做jQuer插件