十一、Ajax发送成功前的loading icon

1. ajax BeforeSend

来源：http://blog.csdn.net/yansong_8686/article/details/50361573

<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
    <title></title>  
    <style>  
.loadingWrap{  
    position:fixed;  
    top:0;  
    left:0;  
    width:100%;  
    height:100%;  
    z-index:300;  
    background-image:url(loading.gif);  
    background-repeat:no-repeat;  
    background-position:center center;  
    background-color:#000;  
    background-color:rgba(0,0,0,0.5);  
    filter:alpha(opacity=50);  
}  
</style>  
      
</head>  
<body>  
    测试 加载中。。。  
    <div class="loadingWrap"></div>  
</body>  
</html>

2. ajax提交表单后的等待，应当做如下处理：

$.ajax(    
    type:"post",    
    url:basePath + “xxx/xxx/xx.do”,    
    data:{"idMerchant":idMerchant},    
    dataType:"json",    
    success:function(data){//后端返回json格式的字符串    
        if(!data){//成功不需要提示  
            alert("提交失败！");  
         }  
    },    
    error:function(){    
        alert("查询异常，请稍后再试或联系管理员。。。");    
    },  
    beforeSend: function(){    
        $("<div class="loadingWrap"></div>").appendTo("body");    
    },   
    complete: function(){    
        $(".loadingWrap").remove();    
    }  

});

3. 效果图：

image.png

4. 有待研究：

http://blog.csdn.net/zhy13087344578/article/details/70687836