Question

我在页面上有几个按钮，点击后会触发ajax调用，然后访问数据库。
点击后，我希望用户在ajax呼叫响应之前无法单击任何按钮但是，如果可能的话，我希望用户得到一些迹象表明系统处于进程中，这样他就不会认为它被卡住了。
某种简单的动画和灰色的页面可以做到这一点，直到有回应。

另外，我想在ajax调用上设置一个时间限制，所以如果没有响应，例如10秒，则调用将返回并给出错误消息。

我有什么选择？

我在WordPress下工作，所以如果有一些很好的方法可以解决这个问题，那么这也是一种选择。

Answer 1

使用jQuery，您可以全局处理ajax事件，请查看http://api.jquery.com/category/ajax/global-ajax-event-handlers/

// #loading can be your loading element
$("#loading").ajaxStart(function(){

    // show your loading element
    $(this).show();


    // disable all buttons with a specific class
    $('.my_ajax_btns').attr('disabled', true);
});

$("#loading").ajaxStop(function(){

    // hide loading
    $(this).hide();


    // enable back your buttons
    $('.my_ajax_btns').attr('disabled', false);
});

Answer 2

这应该做到

<强> JS

$('#overlay').show();

$.ajax({
   url: 'somepage.htm',
   timeout: 10000, /*milliseconds*/
   })
  .complete(function(){ $('#overlay').hide(); }) /*runs after success or error*/
  .success(function(data){ /*do whatever*/ })
  .error(function(){ /*timeout or general error*/ });

<强> HTML

<div id="overlay"></div>

<强> CSS

#overlay{
  display:none;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:#666;
  opacity:0.6;
  z-index:999;
}

演示http://jsfiddle.net/gaby/X6sDS/1/

Answer 3

尝试使用此Jquery插件在AJAX调用响应到来之前阻止用户。您可以在AJAX设置中设置超时（以毫秒为单位）。

http://jquery.malsup.com/block/

在进行ajax调用时暂停用户

3 个答案: