9

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

我的困境是这样的：

  • 同步 AJAX 会锁定浏览器，所以在返回内容之前我什么都做不了（例如显示加载指示器），到那时为时已晚
  • 我使用 JSON 作为返回数据类型并设置 async = true 返回一个空响应字符串
  • 我的整个框架依赖于 JSON 格式的返回类型

除了执行 alert() 之外，我似乎找不到任何方法让 JS 向用户指示某事正在进行中。（出于某种原因，警报确实有效）。

有什么建议么？

我的代码：

JS

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

} ); 

var html = jqXHR.responseText;

PHP

$return = array();
$return['status'] = 1;
$return['message'] = "some html here ...";
echo json_encode($return);
4

3 回答 3

17

您需要在调用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 请求将被调用，并且肯定会在加载显示动画完成之前锁定浏览器

于 2013-05-17T01:12:52.743 回答
10

您可以使用 Jquery Global Ajax 事件处理程序。此链接详细描述了它们：

http://api.jquery.com/category/ajax/global-ajax-event-handlers/

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

$(document).ajaxComplete(function () {
    $("#loading").hide();
});
于 2013-05-17T02:05:22.517 回答
2

嗨，使用类似的东西在 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>

这就是jquery

    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);
    }
});
于 2013-10-22T16:01:21.400 回答