为什么 jquery-ajax 多次提交表单？答案

【问题标题】：Why is jquery-ajax submitting form multiple times?为什么 jquery-ajax 多次提交表单？
【发布时间】：2016-03-25 20:35:48
【问题描述】：

我已阅读：jQuery ajax form submitting multiple times

没用。

如果我在表单上输入内容并单击提交按钮，那么它会发送一个请求。第二次，如果我键入内容并单击它会发送两个请求。第三次它发送三个请求，依此类推。为什么是这样？我在 jquery 代码中做错了吗？

这是我的代码：

index.php =>

<div id="id_div_1" class="cl_div_comment_container"></div>
<form id="id_form_1" method="POST">
<input type="hidden" value="1" name="nm_hidden_post_id">
<textarea class="cl_textarea_comment" style="resize:none;" rows="1" cols="50" name="nm_comment_content"></textarea>
<input class="cl_submit_comment" type="submit" value="Comment" name="nm_submit_comment">
</form>

javascript.js =>

$(document).ready(function(){
    console.log('hello');
    $('input[name="nm_submit_comment"]').on('click',function(){
        var frm = $(this).closest("form")[0];
        var frm_id = $(frm).attr("id");
        var frm_id_splitted = frm_id.split("_");
        var frm_id_splitted_2 = frm_id_splitted[2];
        console.log($('div#id_div_' + frm_id_splitted_2));
        $(frm).on('submit',function(e){
            e.preventDefault();
            frm_serialized = $(this).serialize();
            console.log(frm_serialized);

            $.ajax({
                url: "save-comment.php",
                method: "POST",
                data: frm_serialized,
                success: function(data) {
                    console.log(data);
                    $('div#id_div_' + frm_id_splitted_2).append(data);
                }
            });

        });

    });

});

保存评论.php =>

<?php

if (session_id() == '') {
    session_start();
}    

echo json_encode($_POST);
?>

【问题讨论】：

你可以避开这条线； $(frm).on('提交',function(e){ }
您在每次点击后添加一个新的表单提交处理程序
每个 ajax 调用也在每次点击时再次评估同一个 js 文件。因此，两个点击处理程序和两个 ajax 调用，然后是三个，然后是四个，等等......
无需提交bind，只需serialize您最近的表格并提交ajax call。

标签： javascript php jquery ajax forms

【解决方案1】：

您正在为按钮上的click 事件的代码中注册表单submit 的事件。所以每次你点击按钮时，它都会一遍又一遍地添加事件。

这应该足够了。

$(document).ready(function(){

   $('input[name="nm_submit_comment"]').on('click',function(e){
        e.preventDefault();

        var frm = $(this).closest("form");
        var frm_id = frm.attr("id");
        var frm_id_splitted = frm_id.split("_");
        var frm_id_splitted_2 = frm_id_splitted[2];

        var frm_serialized = frm.serialize();

        $.ajax({
                url: "save-comment.php",
                method: "POST",
                data: frm_serialized,
                success: function(data) {
                    console.log(data);
                    $('div#id_div_' + frm_id_splitted_2).append(data);
                }
        });

   });

});

【讨论】：

太棒了！我有同样的问题：在数据表按钮点击内提交表单。每次执行单击时，提交事件都会增加。现在，有了这个解决方案，它就可以正常工作了！
多亏了这个，我从头上拔了很多头发。我在点击事件中也有 form.submit ，当它被点击时它一直在复制它。我吸取了教训。

【解决方案2】：

尝试one 然后on

$("#id_form_1").one('submit', function (e) {
    e.preventDefault();
    frm_serialized = $(this).serialize();
    console.log(frm_serialized);

    $.ajax({
        url: "save-comment.php",
        method: "POST",
        data: frm_serialized,
        success: function (data) {
            console.log(data);
            $('div#id_div_' + frm_id_splitted_2).append(data);
        }
    });

});

也不需要提交bind只需serialize您最近的表格并拨打ajax电话。你在里面绑定事件并且事件执行multiple binding。

【讨论】：

这对我很有用，click 打开一个模态窗口，然后在该模态窗口中有一个供用户使用submit 的表单。因此 on('submit') 更改为 one('submit') 以使其正常工作

【解决方案3】：

你可以试试这个：

$(document).off().on("click","#submit",(function(e) {  
        e.preventDefault();
}

【讨论】：