Question

我有一个通过ajax调用提交的表单。但是，如果用户单击表单提交按钮超过一次，则每次第一个ajax调用完成之前都会运行ajax调用。所以我想在第一个电话完成之前停止多次提交。这是我的ajax电话。

jQuery('#form1').submit(function(){
   var form_data = jQuery(this).serializeArray();
   form_data = JSON.stringify(form_data);
   var url = 'My ajax URL';
       jQuery.ajax({
            type: "POST",
            url:url,
            data: {
              'data': form_data
            },
            success: function(data){
              alert('success');
            }
        });
})

Answer 1

您只需禁用提交按钮即可。

例如您有一个ID为mySubmitButton

的按钮

jQuery('#form1').submit(function(){
   $('#mySubmitButton').prop('disabled', true); /* <-- disable button */
   var form_data = jQuery(this).serializeArray();
   form_data = JSON.stringify(form_data);
   var url = 'My ajax URL';
       jQuery.ajax({
            type: "POST",
            url:url,
            data: {
              'data': form_data
            },
            success: function(data){
              $('#mySubmitButton').prop('disabled', false); /* <-- enable button */
              alert('success');
            }
        });
})

旁注：您还应该始终在服务呼叫中具有错误功能，并且也应该在其中启用按钮。

Answer 2

您需要一个标记来跟踪提交状态。

var isSubmitting = false; // the flag

jQuery('#form1').submit(function(){
   // If the form is currently being processed, return.
   if (isSubmitting) {
    return; // Do nothing and return
   }
   var form_data = jQuery(this).serializeArray();
   form_data = JSON.stringify(form_data);
   var url = 'My ajax URL';
   isSubmitting = true;
   jQuery.ajax({
        type: "POST",
        url:url,
        data: {
          'data': form_data
        },
        success: function(data){
          alert('success');
        },
        complete: function () {
          // After everything is complete, reset the flag so the form can be submitted again later if needed.
          isSubmitting = false;
        }
    });
})

Answer 3

一旦单击提交按钮，您可以将其禁用，直到ajax调用完成，然后只需删除disable属性即可

jQuery('#form1').submit(function(){
   $("input[type=submit]").attr("disabled", "disabled");
   var form_data = jQuery(this).serializeArray();
   form_data = JSON.stringify(form_data);
   var url = 'My ajax URL';
       jQuery.ajax({
            type: "POST",
            url:url,
            data: {
              'data': form_data
            },
            success: function(data){
              alert('success');
            }
        }).done(function() {
  				  $("input[type=submit]").removeAttr("disabled");
        });
})

Answer 4

您可以在按钮的Click事件之后显示加载程序，这将禁用键盘事件，如下所示：

jQuery('#form1').submit(function(){
$('[id*=loadingmodal]').modal({ backdrop: 'static', keyboard: false });//show the loader after click
   var form_data = jQuery(this).serializeArray();
   form_data = JSON.stringify(form_data);
   var url = 'My ajax URL';
       jQuery.ajax({
            type: "POST",
            url:url,
            data: {
              'data': form_data
            },
            success: function(data){
              alert('success');
 $('[id*=loadingmodal]').modal('hide');//hide the loader after completion
            }
        });
})

点击事件后，请参阅下图所示的加载程序 Loader Image Demo

以下设计显示了引导程序和CSS的简单加载方式

 <div class="modal fade" id="loadingmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm" role="document" style="width: 0px; height: 0px;">
            <div class="modal-content" style="width: 0px; height: 0px; margin-left: -100px; margin-top: -150px; padding: 0px">
                <div class="modal-body" style="width: 0px; height: 0px;">
                    <div class="loader">
                        <div class="loader-inside"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

避免在第一个ajax调用完成之前通过ajax请求提交多个表单

4 个答案: