jquery - 如何使用 jQuery 防止双重提交（$.post）

Question

$(document).ready(function(){

    $("#enviar").click(function(e){

        e.preventDefault();

        //prevent run 2 or more times if the user clicks the button multiple times to send

        $.post(url,{data:data1,data2:data2},function(rp){

        });

    });

});

如果用户重复单击按钮，则防止发送 2 次“帖子”，而不禁用提交按钮

Answer 1

使用特殊类（例如 : submitting）作为标记来指示请求正在进行中：

$("#enviar").click(function(e){
    e.preventDefault();

    var btn = this;
    // check if already present :   
    if ( $(btn).is('.submitting') ){
        return;
    }
    // add it before request :
    $(btn).addClass('submitting');

    $.post(url,{data:data1,data2:data2},function(rp){

    }).always(function(){
        // remove it after completion or failure :
        $(btn).removeClass('submitting');
    });
});

Answer 2

使用 jQuery 的.one事件：

$("#enviar").one("click", function() {
  $.post();
});

从文档：

将处理程序附加到元素的事件。每个元素最多执行一次处理程序

或者，如果您想进行一些额外的检查，请使用开/关：

// Set up the initial bind on DOM ready
$("#enviar").on("click", doPost);

function doPost() {
  // Unbind when it is clicked
  $("#enviar").off("click", doPost);
  // Do your post
  $.post(url, {}, function() {
    // You could bind again on success if you want
    $("#enviar").on("click", doPost);
  });
}