时间戳

首页 > 解决方案 > 避免在第一次 ajax 调用完成之前通过 ajax 请求提交多个表单

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

标签： javascriptjqueryajax

解决方案

您可以简单地禁用您的提交按钮。

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

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

推荐阅读