39

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

有任何想法吗？谢谢！

4

10 回答 10

61

问题在这里：

    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);
        }
    });      
});
于 2013-09-12T22:46:22.080 回答
44

使用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
    });
});
于 2013-09-12T22:47:10.997 回答
5

您可以禁用该按钮。

$(this).prop('disabled', true);
于 2013-09-12T22:45:12.910 回答
5

在您的 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);
    }
});
于 2013-09-12T22:46:44.967 回答
2

我也遇到过类似的问题。

只需添加$('#do-login').attr("disabled", true);即可为我提供解决方案。 

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

这do-login是按钮ID。

于 2019-05-22T09:19:01.817 回答
1

我已经尝试过这个并且对我来说工作得很好，我在 $.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为我工作。谢谢。

于 2020-09-29T11:40:44.350 回答
0

或者你可以通过 $(this).addClass("disabled");你的按钮或链接来完成，点击后，你可以 $(this).removeClass("disabled");。

// CSS

.disabled{
cursor: not-allowed;

}

// 查询

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

PS 如果你使用 bootstrap css，你不需要 css 部分。

于 2014-10-30T12:00:21.160 回答
0

我发现这种方法很有用。我已经将它实现为带有 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);
    });
}

因为$.ajax()返回一个 Promise，所以你只需传入 Promise，剩下的就交给函数了。

粗略地说，这是用法。

import preventDoubleClick from './preventdoubleclick';

...

button.click(() => {
    preventDoubleClick(this, () => $.ajax()
        .done(() => { console.log("success") }));
});
于 2017-12-10T07:50:33.553 回答
0

此功能可以帮助您控制多个 Ajax 请求，并且它具有超时功能，可以在 ex 后将标志状态返回为 0。10 秒（如果服务器响应时间超过 10 秒）

var Request_Controller = function(Request_Name = '', Reactivate_Timeout = 10000)
{
    var a = this;
    a.Start_Request = function(){
        if(window.Requests == undefined){
            window.Requests = {};
        }
        window.Requests[Request_Name] = {'Status' : 1, 'Time': + new Date()};
    }

    a.End_Request = function(){
        if(window.Requests == undefined){
            window.Requests = [];
        }
        window.Requests[Request_Name] = undefined;
    }

    a.Is_Request_Running = function(){
        if(window.Requests == undefined || window.Requests[Request_Name] == undefined){
            return 0;
        }else{
            var Time = + new Date();
            // Reactivate the request flag if server take more than 10 sec to respond
            if(window.Requests[Request_Name]['Time'] < (Time - Reactivate_Timeout)) 
            {
                return 0;
            }else{
                return 1
            }
        }
    }
}

要使用它：

var Request_Flag = new Request_Controller('Your_Request_Name');
if(!Request_Flag.Is_Request_Running()){

    Request_Flag.Start_Request();

    $.ajax({
        type: "POST",
        url: "/php/auth/login.php",
        data: $("#login-form").serialize(),
        success: function(msg) {
            //stuffs
        },
        complete: function() {
            Request_Flag.End_Request();
        }
    }); 
}
于 2019-03-13T00:18:48.853 回答
-9

用于防止整个站点中的多个 ajax 请求。例如：如果在其他 ajax 页面中使用 ajax 请求，在 php 循环中使用 ajax 等，给你多个 ajax 请求一个结果。我有解决方案：

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

代替

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

在 index.php 主页面上。它将阻止所有多请求。:)

于 2014-11-06T13:07:49.607 回答