Jquery 同步Ajax上的加载指示器

我在我的站点上使用ajax和jQuery，需要显示进度/加载指示器

我的难题是：

• 同步AJAX会锁定浏览器，因此在返回内容之前，我无法执行任何操作（例如显示加载指示器），此时为时已晚
• 我使用JSON作为返回数据类型，设置async=true将返回一个空响应字符串
• 我的整个框架依赖于JSON格式的返回类型

我似乎找不到任何方法让JS向用户指示正在进行的操作，除了执行alert（）。（由于某种原因，警报确实起作用）

有什么建议吗

我的代码：

JS

PHP

---

在调用ajax请求之前，需要显示加载显示 您可以使用回调函数和

success

隐藏加载显示

  //show here the loading display
  $(".loading").show();
  setTimeout(function() {
    var jqXHR = $.ajax({
        type: "POST",
        url: url, 
        cache: false,
        data: params, // array of parameters
        async: false, // responseText is empty if set to true
        dataType: 'json',
        error: function(){
               alert("Ajax post request to the following script failed: " + url);
        },
         success: function(){
              //hide loading display here
               $(".loading").hide();
        }
    }); 
  }, 0);

---

在调用ajax函数之前，您需要使用

setTimeout（）

进行延迟，因为它甚至可以停止加载显示的显示，因为正如

$（“.loading”）.show（）一样正在设置动画同步ajax请求将被调用，并且肯定会在加载显示动画完成之前锁定浏览器
您可以使用Jquery全局ajax事件处理程序。此链接详细介绍了它们：


嗨，用这样的东西在magento发帖子

这是html

    <div class="popupNews">
    <div class="popClose">X</div>
        <div id="loading"><img src="<?php echo $this->getSkinUrl('images/loader.gif'); ?>" border="0" /></div>
        <div id="result"></div>
    </div>
</div>

谢谢你的建议。我尝试了这一点，但是由于代码的其余部分似乎正在运行，我得到了一个空的响应文本，试图从尚未运行的ajax函数中获取响应文本，但失败了。不幸的是，在我所有的其他代码上设置timeout是不实际的，因为获取responseText的代码在整个系统中……好吧，我最终使用了一个timeout并修补了我所有的代码，它工作得很好。所以，谢谢你给我一个提示，让我到达那里（我会投票支持你，但没有足够的声望！）我认为超时将使ajax调用异步。谢谢你的建议。令人遗憾的是，DOM更改似乎只在函数完成后才应用（此时已经太晚了…）代码中的第一个函数可能是
$（document）.ajaxSend（function（）{…
  //show here the loading display
  $(".loading").show();
  setTimeout(function() {
    var jqXHR = $.ajax({
        type: "POST",
        url: url, 
        cache: false,
        data: params, // array of parameters
        async: false, // responseText is empty if set to true
        dataType: 'json',
        error: function(){
               alert("Ajax post request to the following script failed: " + url);
        },
         success: function(){
              //hide loading display here
               $(".loading").hide();
        }
    }); 
  }, 0);

$(document).ajaxStart(function () {
    $("#loading").show();
});

$(document).ajaxComplete(function () {
    $("#loading").hide();
});

    <div class="popupNews">
    <div class="popClose">X</div>
        <div id="loading"><img src="<?php echo $this->getSkinUrl('images/loader.gif'); ?>" border="0" /></div>
        <div id="result"></div>
    </div>
</div>

    var url = 'http://blabla.com/ajax';

jQuery.ajaxSetup({
    beforeSend:function(){
        jQuery("#loading").show();
    },
    complete:function(){
        jQuery("#loading").hide();
    }
});

jQuery.ajax({
    url: url,
    type: 'POST',
    data: {id: post},
    success: function(data) {
        jQuery("#result").html(data);
    }
});