jQuery 同步 Ajax 上的加载指示器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16599915/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Loading Indicator on Synchronous Ajax
提问by little_edian
I'm using ajax with jQuery on my site and need to show a progress / loading indicator.
我在我的网站上使用 ajax 和 jQuery，需要显示进度/加载指示器。
My dilemna is this:
我的困境是这样的：
- Synchronous AJAX locks the browser, so I cant do anything (e.g. show a loading indicator) till the contents are returned, by which time it is too late
- I am using JSON as the return data type and setting async = true returns an empty response string
- my whole framework relies on the return type being JSON-formatted
- 同步 AJAX 锁定浏览器，所以在返回内容之前我不能做任何事情（例如显示加载指示器），到那时为时已晚
- 我使用 JSON 作为返回数据类型并设置 async = true 返回一个空响应字符串
- 我的整个框架依赖于 JSON 格式的返回类型
I cannot seem to find any way to get JS to give the user an indication that something is in progress, except for doing an alert(). (For some reason an alert does work).
除了执行 alert() 之外，我似乎找不到任何方法让 JS 向用户指示某些事情正在进行中。（出于某种原因，警报确实有效）。
Any suggestions?
有什么建议？
My code:
我的代码：
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
PHP
$return = array();
$return['status'] = 1;
$return['message'] = "some html here ...";
echo json_encode($return);
回答by Netorica
You need to show a loading display before calling the ajax request
and you can use the callback function and successto hide a loading display
您需要在调用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);
well you need a delay using setTimeout()before calling the ajax function because it can even halt the display of the loading display because as while $(".loading").show();is being animated the sync ajax request will be called and will surely lock the browser before the loading display animation will be completed
好吧，您需要setTimeout()在调用 ajax 函数之前延迟使用，因为它甚至可以停止加载显示的显示，因为$(".loading").show();在动画播放时同步 ajax 请求将被调用，并且肯定会在加载显示动画完成之前锁定浏览器
回答by Baahubali
You can use the Jquery Global Ajax Event Handlers. This link describes them in detail:
您可以使用 Jquery 全局 Ajax 事件处理程序。此链接详细介绍了它们：
http://api.jquery.com/category/ajax/global-ajax-event-handlers/
http://api.jquery.com/category/ajax/global-ajax-event-handlers/
$(document).ajaxStart(function () {
$("#loading").show();
});
$(document).ajaxComplete(function () {
$("#loading").hide();
});
回答by open-ecommerce.org
Hi use some thing like that to get a post in magento....
嗨，使用类似的东西在 magento 中发帖....
This is the html
这是 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>
And this the jquery
这是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);
}
});
