Question

我不知道如何防止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();
  });
});

我希望有一个一流的优雅解决方案，就像一些神秘的属性或函数调用。

Answer 1

尝试以下方法：

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

Answer 2

$('#form').submit(function(e){
$('#btn').attr('disabled', 'disabled');
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){

    },
    complete: function() {
        $('#btn').removeAttr('disabled');
    }

});

e.preventDefault();
});

Answer 3

我通常做的是在点击时禁用提交以防止更多点击，并在完成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();
  });
});

防止多个表单提交。有一个简单的解决方案

3 个答案: