jquery怎样显示loading？

Question

jquery中的AJAX交互$.GET和$.POST怎样在后台数据加载到前台前显示loading的提示？

Answer 1

loading一般是用于二次载入，或者ajax载入的时候使用。我用ajax为例。
需要一张载入的图片，我这里就以loading.gif表示。触发载入我使用点击某个按钮。

html片段
<!--促发按钮-->
<input type="button" id="need-load" value="载入">

<!--遮罩背景层-->
<div id="load-layout" style="position:fixed;width:100%;height:100%;top:0px;left:0px;opacity:0.4;background:#000;display:none;">
<!--放置载入图片层，让载入图片放在大致中心就可以，需要绝对中心的话可以在js中做微调，这里我就忽略-->

<div style="position:absolute;left:49%;top:200px;width:图片宽度px;height:图片高度px;">
<img src="load.gif">

</div>
</div>
jq代码
$(function(){
$('#need-load').click(function(){
var _this = $(this);//存储触发元素，以备后面调用

$(this).attr('disabled',true);//禁用按钮

$('#load-layout').show();
//需要对图片位置进行调整可以放这里，这里忽略

$.ajax({
url : '目标地址'
。。。//ajax相关的参数，忽略

success:function(res){//成功后撤销载入
//这个可以加入的一些撤销判定，这里忽略
//载入后的一些操作，比如某一块显示结果html，这里忽略

$('load-layout').hide();//隐藏载入层

_this.attr('disabled',false);//撤销按钮禁用
},

error:function(){
//这里可以做一些错误的提示
$('load-layout').hide();//隐藏载入层

_this.attr('disabled',false);//撤销按钮禁用
}

});
});
});

Answer 2

有个这样的想法。。。
比如在你前台要显示的地方随便做个<div id='read'></div>
<input type="button" value="提交到后台" id="sub">
$("#id").click(function(){
$("#read").html("Loading........");
$.post("houtai.php“,{data:data},function(result){
$(#read").html("数据加载成功！");
});
});
大概这个思路~

Answer 3

<script src='jquery.js'></script>
<script src='jquery.blockUI.js'></script>
<script>
$.ajax({
url:'test.html',
before:function(){$.blockUI();},
complete:function(){$.unblock();}
});
</script>