我在我的网站上使用带有jQuery的ajax,需要显示进度/加载指示符。
我的困境是:
我似乎无法找到任何方法让JS向用户提供正在进行的指示,除了执行alert()。 (出于某种原因警报确实有效)。
有什么建议吗?
我的代码:
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);
答案 0 :(得分: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请求将被调用并且将会确保在加载显示动画完成之前锁定浏览器
答案 1 :(得分:9)
您可以使用Jquery Global Ajax事件处理程序。此链接详细描述了它们:
http://api.jquery.com/category/ajax/global-ajax-event-handlers/
$(document).ajaxStart(function () {
$("#loading").show();
});
$(document).ajaxComplete(function () {
$("#loading").hide();
});
答案 2 :(得分: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);
}
});