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

我有一个通过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');
            }
        });
})

---

您可以简单地禁用“提交”按钮

例如，您有一个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');
            }
        });
})

jQuery（'#form1'）.submit（函数（）{
$（'#mySubmitButton'）.prop（'disabled'，true）；/*您只需禁用提交按钮即可

例如，您有一个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');
            }
        });
})

jQuery（'#form1'）.submit（函数（）{
$（'#mySubmitButton'）.prop（'disabled'，true）；/*您需要一个标志来跟踪提交状态

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

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

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

单击submit按钮后，可以禁用它，直到ajax调用完成，然后只需删除disable属性


jQuery（'#form1'）.submit（函数（）{
$（“输入[类型=提交]”）.attr（“已禁用”、“已禁用”）；
var form_data=jQuery（this）.serializeArray（）；
form_data=JSON.stringify（form_data）；
var url='myajaxurl'；
jQuery.ajax({
类型：“POST”，
url:url，
数据：{
“数据”：表单数据
},
成功：功能（数据）{
警惕（“成功”）；
}
}).done（函数（）{
$（“input[type=submit]”。removeAttr（“已禁用”）；
});
})
单击submit按钮后，可以禁用它，直到ajax调用完成，然后只需删除disable属性即可


jQuery（'#form1'）.submit（函数（）{
$（“输入[类型=提交]”）.attr（“已禁用”、“已禁用”）；
var form_data=jQuery（this）.serializeArray（）；
form_data=JSON.stringify（form_data）；
var url='myajaxurl'；
jQuery.ajax({
类型：“POST”，
url:url，
数据：{
“数据”：表单数据
},
成功：功能（数据）{
警惕（“成功”）；
}
}).done（函数（）{
$（“input[type=submit]”。removeAttr（“已禁用”）；
});
})
您可以在按钮的单击事件后显示loader，该事件将禁用键盘事件，如下所示

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

请参阅单击事件后加载程序的下图

下面的设计展示了bootstrap和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>

您可以在按钮的单击事件后显示loader，该事件将禁用键盘事件，如下所示

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

请参阅单击事件后加载程序的下图

下面的设计展示了bootstrap和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>


我建议最简单的方法-单击后锁定表单按钮，一旦响应从服务器返回，就将其解锁。此外，您可以在lodash中检查取消公告功能：“创建一个取消公告功能，延迟调用func，直到上次调用取消公告功能后等待毫秒。”您可以使用同步（非异步）请求async:false参数来执行此操作，但这通常是一件坏事。我建议使用最简单的方法-单击后锁定表单按钮，一旦响应从服务器返回，就将其解锁。此外，您还可以检查lodash中的debounce函数：“创建一个取消公告的函数，该函数将延迟调用func，直到自上次调用取消公告的函数以来的等待毫秒之后。”您可以使用同步（非异步）请求async:false参数来执行此操作，但这通常是一件坏事。