只有一个ajax调用，请等到成功再单击一次

Question

如何防止用户在运行ajax调用的链接上单击很多次后才成功运行

Answer 1

如果您是按我的意思说的，那么一旦单击该按钮，便会在ajax函数中禁用该按钮（在实际创建http请求之前）。 然后，一旦您的ajax调用完成，您的onreadystate函数将重新启用它。

禁用具有ID的按钮。

document.getElementById("theidofthebutton").enabled = false;

重新启用它...

document.getElementById("theidofthebutton").enabled = true;

编辑：我看到你指的是一个链接而不是一个按钮。 我可能是错的，但我认为您仍然可以以相同的方式禁用它。

Answer 2

一种简单的解决方案是在用户单击时将一个类添加到链接，并在收到响应时删除该类。

每次单击链接都会检查是否存在pending类，并且仅在不存在时才发送AJAX请求。

然后complete:回调将删除pending类。

$('a.myLink').click(function() {
    var $th = $(this);
    if( !$th.hasClass('pending') ) {
        $th.addClass('pending');
        $.ajax({
          url:'something',
          complete: function() {
              $th.removeClass('pending');
          }
        });
     }
});

Answer 3

尝试使用jquery插件BlockUI阻止用户再次单击链接。 这可以在元素或页面级别完成。

// unblock when ajax activity stops 
$(document).ajaxStop($.unblockUI); 

function test() { 
    $.ajax({ url: 'wait.php', cache: false }); 
} 

$(document).ready(function() { 
    $('#pageDemo2').click(function() { 
        $('div.test').block({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' }); 
        test(); 
    });  
});