自定义扩展jquery的ajax方法添加maskLoader

使用Jquery的ajax方法的时候，由于$.ajax()需要在beforeSend添加Loading的效果，但是鉴于每次使用的beforeSend的Loading效果

相差不大，为了避免麻烦，所以自己重新定义$.ajaxSetup方法来达到好的扩展使用，只要引入js文件就可以设置是否使用Loading的效果

样式：

定义方法如下：首先编写ajax_extend.js文件

$(function(){
    $.ajaxSetup({
        beforeSend:function(jqXHR,options){              
            if(options.maskLoader){ //使用maskLoader效果	
             var eTip = document.createElement('div');  
            eTip.setAttribute('id', 'tipDiv');  
            eTip.style.position = 'absolute';  
            eTip.style.display = 'none';  
            eTip.style.border = 'solid 0px #D1D1D1';  
            eTip.style.backgroundColor = '#4B981D'; 
            eTip.style.top = '0px';  
            eTip.style.left = '500px';  
            eTip.style.width = '150px';
            eTip.style.textAlign = 'center'; 
            eTip.innerHTML = '<img src=\'ajax_loader.gif\' style=\'float:left;\' />  <span style=\'color:#ffffff; font-size:12px\'>' + '正在加载'+ '</span>'
            document.body.appendChild(eTip);
             $("#tipDiv").css("float", "right");  
             $("#tipDiv").css("z-index", "99");  
             $('#tipDiv').fadeIn();
            }
        },
        complete:function(jqXHR,options){
            $('#tipDiv').fadeOut();
        }
    });
});

测试页面中只要引入该js文件在$.ajax定义 maskLoader:true就可以使用maskLoader的效果。测试页面如下所示：

<html>
    <head>
        <title>定义ajax_setup</title>
        <script src="lib/jquery-1.8.3.min.js" type="text/javascript"></script>      
        <script src="lib/ajax_extend.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="mask">
            
        </div>
        <input type="button" id="start_ajax" value="点击加载" >
        <script type="text/javascript">
            $('#start_ajax').click(function(){
                $.ajax({
                    url:'Json.php',
                    type:'get',
                    dataType:'json',
                    maskLoader:true,
                    success:function(data){
                        console.info(data);
                    },
                    error:function(data){
                        console.log(data);
                    }
                });
            });
       
       </script>
        
    </body>
      
</html>

效果如下图所示：

自定义扩展jquery的ajax方法添加maskLoader

简单便捷。。。同理如果每次都要进行传输一定的参数，也可以通过加入到$.ajaxSetup里面,来减少代码量。

秒客网

自定义扩展jquery的ajax方法添加maskLoader

相关文章