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

I'm trying to prevent multiple requests when user click on login or register button. This is my code, but it doesn't work. Just the first time works fine, then return false..

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

Any ideas? Thanks!

什么好主意吗?谢谢!

7 个解决方案

#1

The problem is here:

这里的问题是:

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

this no longer points to the button.

它不再指向按钮。

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

#2

Use on() and off(), that's what they are there for :

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
    });
});

#3

You can disable the button.

您可以禁用按钮。

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

#4

In your ajax callbacks the context (this) changes from the outer function, you can set it to be the same by using the context property in $.ajax

在ajax回调来自外部函数的上下文(此)更改时，可以使用$.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);
    }
});

#5

Or you can do it by $(this).addClass("disabled"); to you button or link and after click is performed, you can $(this).removeClass("disabled");.

或者您可以用$(this).addClass(“禁用”)来完成它;对于您的按钮或链接，在执行单击之后，您可以$(this). removeclass(“禁用”);

// CSS

/ / CSS

.disabled{
cursor: not-allowed;

}

// JQUERY

/ / 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");
        },
    });
});

P.S. If you use bootstrap css, you do not need the css part.

附注:如果你使用引导css，你不需要css部分。

#6

I found the approach useful. I've implemented it as a general purpose function for jQuery with ES6.

我发现这种方法很有用。我用ES6实现了它作为jQuery的通用函数。

export default function (button, promise) {
    const $button = $(button);
    const semaphore = 'requestRunning';

    if ($button.data(semaphore)) return null;
    $button.data(semaphore, true);

    return promise().always(() => {
        $button.data(semaphore, false);
    });
}

Because $.ajax() returns a promise, you simply pass in the promise and the function takes care of the rest.

因为$.ajax()返回一个承诺，所以您只需传递这个承诺，剩下的由函数处理。

Roughly speaking, here's the usage.

粗略地说，这是用法。

import preventDoubleClick from './preventdoubleclick';

...

button.click(() => {
    preventDoubleClick(this, () => $.ajax()
        .done(() => { console.log("success") }));
});

#7

-9

for prevent multiple ajax request in whole site. For example: If use ajax request in other ajax page, Using ajax in php loop, etc, Give you multiple ajax request with one result. I have solution:

防止在整个站点中出现多个ajax请求。例如:如果在其他ajax页面中使用ajax请求，在php循环中使用ajax，等等，那么将为您提供多个ajax请求，并产生一个结果。我的解决方案:

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

instead of

而不是

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

on the main index.php page. Its will be prevent all multi request. :)

在主索引。php页面。它将防止所有的多请求。:)

#1