加载等待

在用户进行后台数据的查找时。为了有较好的体验效果。在后台数据返回前台前的这一段时间应该出现加载等待的显示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(){

           }
        });

 

 

希望大家有指出不足!

你可能感兴趣的:(jquery,Ajax,blockUI.js)