Javascript 引导模式ajax表单已提交多次

我使用ajax在modal中调用表单，并使用modal按钮

。save modal

表单使用ajax提交。有很多人提交了表格，我不知道为什么

页面-表单-中的以下代码由modal请求：

```

我曾尝试在代码的许多部分添加

return false

，以减少任何额外的计算，我还尝试向ajax URL

Math.random（）

添加随机数，但它似乎执行了很多次

---

在同一个页面上还有另一个表单调用，称为使用模式，有时除了被调用的表单之外，还可以保存它

当您使用ajax调用表单时，您应该记住，每次收到响应时都会执行document ready的javascript/jquery代码

所以，当您第一次打开模型时，“保存模式”点击事件被绑定。关闭并重新打开模型时。请求再次转到浏览器窗口中加载的服务器ajax内容，并再次绑定单击事件。这样，您将得到绑定到单个事件的多个匿名函数。所有将在同一事件上执行

解决方案1（重新命名）：在saperate js文件或内联文件中声明函数，该文件包含在主页（非ajax）中。然后使用jQuery来代替绑定click事件。从“.save model”按钮的onclick属性调用函数

解决方案2：声明一个全局变量“IsAjaxExecuting”。测试此变量是否为true，然后从save函数返回（这将停止多线程执行）。如果不是真的，那就把它变成真的。执行ajax函数。当收到响应时，再次将其设为false。例如

var IsAjaxExecuting= false; // new code
$(document).ready(function() {

    $(".save-modal").click(function(e) {
        if(IsAjaxExecuting) return; // new code
        IsAjaxExecuting = true; // new code

        alert('many time alert');
        e.preventDefault();
        $.ajax({
            url: '{{$actionPath}}' + '/?' + Math.random(),
            type: "POST",
            data: $("#sForm").serialize(),
            success: function(data) {
                IsAjaxExecuting = false; // new code
                $("#modal-body").html($(data).find('#flash-msg'))

                $("#actions-modal").modal('hide')
                //return true;
            },
            error: function(xhr, status, response) {
                IsAjaxExecuting = false; // new code
                if (status == "error") {
                    var msg = "Sorry but there was an error: ";

                    // $( "#modal-body" ).html( msg + xhr.status + " " + xhr.statusText );
                    errors = xhr.responseJSON
                    console.log(errors)
                    $("#errors").html('');
                    $.each(errors, function(key, val) {

                        console.log(key)
                        $("#errors").append('<span class="has-error help-block">' + val + '</sapn>')

                        //return false;
                    })
                    xhr.responseJSON = null;

                }
                return false;
            }
        })
        return false;
    })
});

var=false；//新代码
$（文档）.ready（函数（）{
$（“.save modal”）。单击（函数（e）{
if（IsAjaxExecuting）return；//新代码
IsAjaxExecuting=true；//新代码
警报（“多次警报”）；
e、 预防默认值（）；
$.ajax({
url:“{{$actionPath}”+'/？'+Math.random（），
类型：“POST”，
数据：$（“#sForm”）.serialize（），
成功：功能（数据）{
IsAjaxExecuting=false；//新代码
$（“#模态体”）.html（$（数据）.find（“#flash msg”））
$（“#操作模式”）.model（'hide'）
//返回true；
},
错误：函数（xhr、状态、响应）{
IsAjaxExecuting=false；//新代码
如果（状态=“错误”）{
var msg=“抱歉，出现错误：”；
//$（“#模态体”）.html（msg+xhr.status+“”+xhr.statusText）；
errors=xhr.responseJSON
console.log（错误）
$（“#错误”）.html（“”）；
$.each（错误、函数（键、值）{
console.log（键）
$（“#错误”）。追加（“”+val+“”）
//返回false；
})
xhr.responseJSON=null；
}
返回false；
}
})
返回false；
})
});

@Roamer-1888否，如果您填写了无效数据，则应在服务器端

422

上生成一个错误，响应包含字段错误消息。但是，

警报

和控制台日志显示，在关闭模式后，点击

保存更改

，即

。保存模式

，会多次被调用，然后再次尝试保存无效数据，因为用户可能会忘记提供验证数据。i、 e将标题字段留空。同样，这似乎不是一个与错误事件相关的问题，错误只是因为模态保持打开状态而显示出来。感谢您的赞赏和接受答案。很乐意帮忙。

$(".action-create").click(function(e){
    e.preventDefault();
    alert($(this).attr('href'))


    mhd = $(this).attr('title');//$(this).text()+' {{__("for Cavity")}}'+' '+$(this).attr('title');
    href = $(this).attr('href')



    //console.log(href)

    $("#actions-modal").on('show.bs.modal', function(){
            $("#modal-hd").html('<h4 style="display: inline">'+mhd+'</h4>');  
            $("#modal-body").html('<h4>{{__('Loading')}}<img src="/imgs/loading.gif" /></h4>')     
            gg(href)
            })

    $("#actions-modal").modal({
        backdrop: 'static',
        keyboard: false        
        });
    });

    $("#actions-modal").on('hidden.bs.modal', function(){

        $("#modal-body").html('');
        $(this).data('bs.modal', null);
        //$(this).children('#errors').html('');
        $("#errors").html('');
        return false;

    });

    gg = function gg(){

        $.ajax({
                type: "GET",
                url: href,
                dataType: 'html',
                success: function(data){
                    //console.log(data)
                    required = $(data).find("#modal");
                    $("#modal-body").html(required);
                },
                error: function(xhr, status, response ){
                    if ( status == "error" ) {
                    var msg = "Sorry but there was an error: ";
                     $( "#modal-body" ).html( msg + xhr.status + " " + xhr.statusText+ " With custom message:<br> "+ xhr.responseText );
                     //console.log(xhr)
                    }
                }

        });
        return false;
    }

var IsAjaxExecuting= false; // new code
$(document).ready(function() {

    $(".save-modal").click(function(e) {
        if(IsAjaxExecuting) return; // new code
        IsAjaxExecuting = true; // new code

        alert('many time alert');
        e.preventDefault();
        $.ajax({
            url: '{{$actionPath}}' + '/?' + Math.random(),
            type: "POST",
            data: $("#sForm").serialize(),
            success: function(data) {
                IsAjaxExecuting = false; // new code
                $("#modal-body").html($(data).find('#flash-msg'))

                $("#actions-modal").modal('hide')
                //return true;
            },
            error: function(xhr, status, response) {
                IsAjaxExecuting = false; // new code
                if (status == "error") {
                    var msg = "Sorry but there was an error: ";

                    // $( "#modal-body" ).html( msg + xhr.status + " " + xhr.statusText );
                    errors = xhr.responseJSON
                    console.log(errors)
                    $("#errors").html('');
                    $.each(errors, function(key, val) {

                        console.log(key)
                        $("#errors").append('<span class="has-error help-block">' + val + '</sapn>')

                        //return false;
                    })
                    xhr.responseJSON = null;

                }
                return false;
            }
        })
        return false;
    })
});