Question

我使用ajax在模态中调用表单，并使用模式按钮.save-modal使用ajax提交表单。表格有很多提交，我不知道为什么？

模式所请求的页面形式中的以下代码：

```

@section('content')
<h1>kk</h1>
<div id="modal">
    {!! Form::model('App\Solution',['url' => $actionPath, 'id' => 'sForm', 'class' => 'form-inline']) !!}

    <div class="form-group">
    {!! Form::label('title', __('Title')) !!}
    {!! Form::text('title',$solution->title,['class' =>'form-control']) !!}
    @php ($eleE =  $errors->first('title'))
     {{-- @include('layouts.form-ele-error') --}}
    </div>
    <div class="form-group">
    {!! Form::label('description', __('Description')) !!}
    {!! Form::textarea('description',$solution->description,['class' =>'form-control']) !!}
    @php ($eleE =  $errors->first('description'))
     {{-- @include('layouts.form-ele-error') --}}
    </div>

    {!! Form::close() !!}


<script>
    $(document).ready(function(){

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

               $("#actions-modal").modal('hide')
               //return true;
           },
           error: function(xhr, status, response){
               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;
      })
      });
      </script>
   </div>
@endsection

$(".save-modal").click(function(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;
    }

我试图在代码的许多部分添加return false以减少任何额外的评估，我还尝试将随机数添加到ajax URL Math.random()但似乎它执行了很多次。

在使用模态调用的同一页面上还有另一个表单调用，有时除了被调用的表单之外还会保存它！

Answer 1

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

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

解决方案1（重新编写）：在主页（不是ajax）中包含的saperate js文件或内联中声明函数。然后使用jQuery绑定click事件而不是。从“.save-modal”按钮的onclick属性调用函数。

解决方案2：声明一个全局变量“IsAjaxExecuting”。测试此变量是否为true然后从保存函数返回（这将停止多重执行）。如果它不是真的那么就说实话。执行你的ajax功能。收到回复后再将其设为假。例如

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;
    })
});

Bootstrap模态ajax表单多次提交

1 个答案: