在用户进行后台数据的查找时。为了有较好的体验效果。在后台数据返回前台前的这一段时间应该出现加载等待的显示div这样既能避免了用户在等待时的烦躁还可以避免了用户的频繁点击;
使用的jquery的blockUI.js 来实现遮罩层。jquery的ajax实现异步登录;
步骤一:引入js
<script type="text/javascript" src="jquery.blockUI.js"></script>
步骤二:异步请求(jquery 的 ajax 请求)
$.ajax({
type :'post',
url :'search.do?action=getPageData',
dataType :'json',
data : {
'flag':flag,
'name' :name
},
beforeSend:function(){
//设置遮罩层
$.blockUI({
message: '<image src="framework/images/loading/loadings.jpg"></image>',//自定义遮罩层中的"加载等待"的图片
css: {//遮罩层的大小等属性设置
border: 'none',
width: "20px", // 宽度小一点
top: "50%",
left: "55%"
}
});
//将页面的按钮置为不可用
$("#noclickCon")[0].disabled = true;
},
complete:function(){
//移除遮罩层
$.unblockUI();
//将页面的按钮置为可用
$("#noclickCon")[0].disabled = false;
},
success:function(data){
//将后台返回的数据在前台页面进行展示
},
error:function(){
}
});
希望大家有指出不足!