Javascript Ajax，防止单击时出现多个请求

当用户单击登录或注册按钮时，我试图阻止多个请求。这是我的代码，但不起作用。只是第一次工作正常，然后返回false

$('#do-login').click(function(e) {
    e.preventDefault();

    if ( $(this).data('requestRunning') ) {
        return;
    }

    $(this).data('requestRunning', true);

    $.ajax({
        type: "POST",
        url: "/php/auth/login.php",
        data: $("#login-form").serialize(),
        success: function(msg) {
            //stuffs
        },
        complete: function() {
            $(this).data('requestRunning', false);
        }
    });      
}); 

---

有什么想法吗？谢谢

您可以禁用该按钮

$(this).prop('disabled', true);

$('#do-login').click(function(e) {
    var me = $(this);
    e.preventDefault();

    if ( me.data('requestRunning') ) {
        return;
    }

    me.data('requestRunning', true);

    $.ajax({
        type: "POST",
        url: "/php/auth/login.php",
        data: $("#login-form").serialize(),
        success: function(msg) {
            //stuffs
        },
        complete: function() {
            me.data('requestRunning', false);
        }
    });      
}); 

问题在于：

    complete: function() {
        $(this).data('requestRunning', false);
    }

此

不再指向按钮

$(this).prop('disabled', true);

$('#do-login').click(function(e) {
    var me = $(this);
    e.preventDefault();

    if ( me.data('requestRunning') ) {
        return;
    }

    me.data('requestRunning', true);

    $.ajax({
        type: "POST",
        url: "/php/auth/login.php",
        data: $("#login-form").serialize(),
        success: function(msg) {
            //stuffs
        },
        complete: function() {
            me.data('requestRunning', false);
        }
    });      
}); 

---

在您的ajax回调中，上下文（

this

）从外部函数更改，您可以使用$.ajax中的context属性将其设置为相同

$.ajax({
    type: "POST",
    url: "/php/auth/login.php",
    data: $("#login-form").serialize(),
    context: this, //<-----
    success: function(msg) {
        //stuffs
    },
    complete: function() {
        $(this).data('requestRunning', false);
    }
});      

$.ajax({
类型：“POST”，
url:“/php/auth/login.php”，
数据：$（“#登录表单”）.serialize（），
上下文：这，//使用
on（）
和
off（）
，这就是它们的用途：

$('#do-login').on('click', login);

function login(e) {
    e.preventDefault();
    var that = $(this);
    that.off('click'); // remove handler
    $.ajax({
        type: "POST",
        url: "/php/auth/login.php",
        data: $("#login-form").serialize()
    }).done(function(msg) {
        // do stuff
    }).always(function() {
        that.on('click', login); // add handler back after ajax
    });
}); 

或者您可以通过
$（this）.addClass（“disabled”）；
按钮或链接来执行此操作，单击后，您可以
$（this）.removeClass（“disabled”）；

//CSS

.disabled{
cursor: not-allowed;

}

//JQUERY

$('#do-login').click(function(e) {
   e.preventDefault();

    $(this).addClass("disabled");
    $.ajax({
        type: "POST",
        url: "/php/auth/login.php",
        data: $("#login-form").serialize(),
        context: this,
        success: function(msg) {
    //do more here

           $(this).removeClass("disabled");
        },
    });
});

另外，如果您使用引导css，则不需要css部分。
用于防止整个站点中出现多个ajax请求。例如：如果在其他ajax页面中使用ajax请求，在php循环中使用ajax等，则使用一个结果给出多个ajax请求。我有解决方案：

Use window.onload = function() { ...  } 

而不是

$(document).ready(function(){ ...  });

在main index.php页面上。它将阻止所有多请求。：）
我发现该方法很有用。我已经将其作为jQuery与ES6的通用函数实现

导出默认功能（按钮，承诺）{
const$按钮=$（按钮）；
常量信号量='requestRunning'；
if（$button.data（信号量））返回null；
$button.data（信号量，true）；
返回承诺（）。始终（（）=>{
$button.data（信号量，false）；
});
}

因为
$.ajax（）
返回一个承诺，所以您只需传入该承诺，函数就会处理其余部分

粗略地说，这里是用法

import-preventDoubleClick from./preventDoubleClick'；
...
按钮。单击（（）=>{
preventDoubleClick（这个，（）=>$.ajax（）
.done（（）=>{console.log（“success”）}）；
});
此功能可以帮助您控制多个Ajax请求，它具有超时功能，可在10秒后将标志状态返回到0（如果服务器响应时间超过10秒）

我也面临着类似的问题

只需添加
$（'#do login'）。attr（“disabled”，true）；
就提供了解决方案

$('#do-login').click(function(e) {
   e.preventDefault();
   $('#do-login').attr("disabled", true);
   .........
   .........

这里的
do login
是按钮id。
我已经尝试过了，效果很好，我遇到了麻烦，$.ajax在返回结果之前发送更多请求

 var settings = {
    "url": "/php/auth/login.php",
    "method": "POST",
    "timeout": 0,
    "async": false,
    "headers": {
        "Content-Type": "application/json; charset=utf-8"
    },
    "data": jsondata, //data pass here is in JSON format
};
$.ajax(settings).done(function (ress) {
  try{
      console.log(ress, "Result from Ajax here");
    }
    catch(error){
      alert(error);
      console.log(ress);
    }
});

async:false
对我有效。
谢谢。
谢谢！Joe的解决方案很好。但这是获得相同结果的另一种方法。哪一种是最好的解决方案？@adeneo的解决方案更好。@JoeFrambach-谢谢，但这是一个偏好的问题。实际上，在data（）中设置标志并没有什么错，但这看起来确实像是开（）和关（）的区别是用来添加和删除事件处理程序的吗？如果：用户单击按钮（因此AJAX请求被发送），然后再次单击它（AJAX仍然没有完成）：e.preventDefault（）不会被调用，因此按钮将提交表单（而它应该什么都不做）@tigrou-是的，如果它是一个表单，则可能会发生这种情况，但很容易解决，只需将preventDefault添加到提交事件处理程序中即可。感谢对选项
上下文的解释