Javascript 防止多个表单提交。有简单的解决办法吗

我不知道如何在ajax中防止多个表单提交。到目前为止，我在网上看到的要么是不起作用的解决方案，要么是真正的庞然大物（对于这样一个微观的任务，大量弯曲的代码。为什么？）。我现在拥有的是以下代码：

$('#btn').click(function(){
  $('#form').submit(function(e){
    var postData = $(this).serializeArray(),
    formURL = $(this).attr('action');
    $.ajax({
        url:formURL,
        type:'POST',
        data:postData,
        success:function(data, textStatus, jqXHR){

        },
        error:function(jqXHR, textStatus, errorThrown){

        }
    });
    e.preventDefault();
  });
});

我希望有一个一笔勾销的优雅解决方案，比如一些神秘的属性或函数调用。

尝试以下方法：

 $('#btn').click(function(){
  $(this).prop("disabled",true);
  $('#form').submit(function(e){
    var postData = $(this).serializeArray(),
    formURL = $(this).attr('action');
    $.ajax({
        url:formURL,
        type:'POST',
        data:postData,
        success:function(data, textStatus, jqXHR){
              $('#btn').prop("disabled",false);
        },
        error:function(jqXHR, textStatus, errorThrown){
              //handle error
        }
    });
    e.preventDefault();
  });
});

请尝试以下操作：

 $('#btn').click(function(){
  $(this).prop("disabled",true);
  $('#form').submit(function(e){
    var postData = $(this).serializeArray(),
    formURL = $(this).attr('action');
    $.ajax({
        url:formURL,
        type:'POST',
        data:postData,
        success:function(data, textStatus, jqXHR){
              $('#btn').prop("disabled",false);
        },
        error:function(jqXHR, textStatus, errorThrown){
              //handle error
        }
    });
    e.preventDefault();
  });
});

---

我通常做的是禁用单击提交以防止更多点击，并在ajax完成后重新启用它：

$('#btn').click(function(){
  $(this).prop('disabled', true)  // disable submit to prevent multiple sends
  $('#form').submit(function(e){
    var postData = $(this).serializeArray(),
    formURL = $(this).attr('action');
    $.ajax({
        url:formURL,
        type:'POST',
        data:postData,
        success:function(data, textStatus, jqXHR){

        },
        error:function(jqXHR, textStatus, errorThrown){

        },
        always:function(){ // it its a success or a fail, we want to re-enable it
            $(this).prop('disabled', false) 
        }
    });
    e.preventDefault();
  });
});

---

我通常做的是禁用单击提交以防止更多点击，并在ajax完成后重新启用它：

$('#btn').click(function(){
  $(this).prop('disabled', true)  // disable submit to prevent multiple sends
  $('#form').submit(function(e){
    var postData = $(this).serializeArray(),
    formURL = $(this).attr('action');
    $.ajax({
        url:formURL,
        type:'POST',
        data:postData,
        success:function(data, textStatus, jqXHR){

        },
        error:function(jqXHR, textStatus, errorThrown){

        },
        always:function(){ // it its a success or a fail, we want to re-enable it
            $(this).prop('disabled', false) 
        }
    });
    e.preventDefault();
  });
});

---

你可以在ajax端禁用#btn点击并重新启用，这是我通常做的事情神秘的：你可以在ajax端禁用#btn点击并重新启用，这是我通常做的事情神秘的：如果表单上出现错误，因为你没有启用错误按钮，会发生什么？这取决于你如何处理你想要的方式！例如，您可以再次启用该按钮。您应该在“提交”上禁用该按钮，而不是在“成功”上禁用该按钮。。否则双击仍会注册两次等@CᴴᵁᴮᴮʸNᴵᴺᴶᴬ 按钮在点击时被禁用，成功后重新启用@回调啊，是的，对不起，我的错误没有看到您的初始

prop

如果表单上出现错误，因为您没有启用错误按钮，会发生什么？这取决于您如何处理您想要的方式！例如，您可以再次启用该按钮。您应该在“提交”上禁用该按钮，而不是在“成功”上禁用该按钮。。否则双击仍会注册两次等@CᴴᵁᴮᴮʸNᴵᴺᴶᴬ 按钮在点击时被禁用，成功后重新启用@回调啊，是的，很抱歉我的错误没有看到您的初始

prop

在该任务的上下文中

complete

和

always

属性之间是否存在差异？不确定，但我想您应该如何完成。这是您从jquery网站得到的：当请求完成时（在执行成功和错误回调后）调用的函数。函数将传递两个参数：jqXHR（在jQuery 1.4.x中，XMLHTTPRequest）对象和一个字符串，该字符串对请求状态进行分类（“成功”、“未修改”、“无内容”、“错误”、“超时”、“中止”或“解析器错误”），欢迎使用！我对“always”的看法不好，因为“complete”往往被弃用。always（）方法取代了弃用的.complete（）方法。在这个任务的上下文中，

complete

和

always

属性之间有什么区别吗？不确定，但我想知道您应该选择complete。这是您从jquery网站得到的：当请求完成时（在执行成功和错误回调后）调用的函数。函数将传递两个参数：jqXHR（在jQuery 1.4.x中，XMLHTTPRequest）对象和一个字符串，该字符串对请求状态进行分类（“成功”、“未修改”、“无内容”、“错误”、“超时”、“中止”或“解析器错误”），欢迎使用！我对“always”的看法不好，因为“complete”往往被弃用。作为complete回调选项的替代构造，.always（）方法替换弃用的.complete（）方法。