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

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

旁注:您还应该始终在服务调用上有一个错误功能，并且您也应该在那里启用您的按钮。