Ajax，防止点击多个请求

IT技术 javascript jquery ajax
2021-03-01 11:13:46

当用户单击登录或注册按钮时，我试图阻止多个请求。这是我的代码，但它不起作用。第一次工作正常，然后返回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);
        }
    });      
});

有任何想法吗？谢谢！

6个回答

问题在这里：

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

this 不再指向按钮。

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

使用on()and 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
    });
});
@adeneo 的解决方案更好。
2021-04-29 11:13:46
@tigrou - 是的，如果它是一个表单，那可能会发生，但很容易解决，只需将 preventDefault 添加到提交事件处理程序。
2021-05-04 11:13:46
谢谢！乔的解决方案工作正常。但这种另一种方式可以获得相同的结果。哪个是最好的解决方案？
2021-05-06 11:13:46
@JoeFrambach - 谢谢，但这确实是一个偏好问题，在 data() 中设置标志没有任何问题，但这似乎就像 on() 和 off() 的目的一样，添加和删除事件处理程序？
2021-05-10 11:13:46
如果：用户单击按钮（因此发送 AJAX 请求）然后再单击一次（并且 AJAX 仍未完成）： e.preventDefault() 不会被调用，因此按钮将提交表单（而它应该什么都不做） )
2021-05-16 11:13:46

您可以禁用该按钮。

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

在您的 ajax 回调中，上下文 ( this) 从外部函数更改，您可以使用 $.ajax 中的上下文属性将其设置为相同

$.ajax({
    type: "POST",
    url: "/php/auth/login.php",
    data: $("#login-form").serialize(),
    context: this, //<-----
    success: function(msg) {
        //stuffs
    },
    complete: function() {
        $(this).data('requestRunning', false);
    }
});
感谢您对选项的解释 context
2021-05-07 11:13:46

我也遇到过类似的问题。

只是添加$('#do-login').attr("disabled", true);给了我解决方案。 

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

这do-login是按钮 ID。

其它你可能感兴趣的问题
上一篇弧外标签（饼图）d3.js 下一篇在 JavaScript 中执行继承