ajax请求成功前，加载中loading显示

最新推荐文章于 2020-10-13 18:00:57 发布

weixin_30772105

最新推荐文章于 2020-10-13 18:00:57 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： python javascript json ViewUI

原文链接：http://www.cnblogs.com/zhaomeizi/p/8431707.html

本文介绍了一种在页面首次加载时显示加载提示，并通过定时器进行数据更新的方法。使用了全局变量fistInitColumn来控制首次加载时的loading显示，并详细展示了如何通过JavaScript和jQuery实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 /*第一次刷新--非定时器刷新数据*/
 2 var fistInitColumn = true; 
 3 var getAllColumnDatas = function(){
 4     var params = {};
 5     var resourcesID = [];
 6     for(var i = 0; i < leftCenterMenus.length; i++){
 7         resourcesID.push(leftCenterMenus[i].id);
 8     }
 9     for(var i = 0; i < leftBottomMenus.length; i++){
10         resourcesID.push(leftBottomMenus[i].id);
11     }
12     params.resourcesID = resourcesID;
13     $.ajax({
14         type : "POST",
15         data: params,
16         datatype : "json",
17         async:true,
18         traditional: true,
19         url : "/api/column/getColumnData",
20         success : function(data, status, xhr) {
21             var jsonResult = null;
22             if(typeof data == 'string'){
23                 jsonResult = JSON.parse(data);
24             }else{
25                 jsonResult = data;
26             }
27             //成功执行操作
28 
29                 fistInitColumn = false;
30             }
31         },
32         beforeSend: function(){ 
33             if(fistInitColumn){
34                 setLoadingHtml("leftCenter");
35                 setLoadingHtml("leftBottom");
36             }
37         },   
38         complete: function(){    
39             removeLoadingHtml("leftCenter");
40         },
41         error : function(data, status, xhr) {
42             console.log('服务器错误！');
43             return;
44         }
45         
46     });
47 }

这个function有个定时器定时请求，需求是第一个加载请求显示loading，定时数据请求时，不需要显示loading样式；加了一个fistInitColumn全局变量控制。

1 /*设置loading的HTML*/
2 var setLoadingHtml = function(idName){
3     var $div = $("#" + idName +"_detail");
4     $div.html("");
5     var loadStr = '<div class="loadingWrap"></div>';
6     $div.append(loadStr);
7 }

/*移除loading的HTML*/
var removeLoadingHtml = function(idName){
    var $div = $("#" + idName + "_detail .loadingWrap").remove();
}

下面是loading的css样式：

/* loading */
.loadingWrap{  
    position:absolute;  
    top:0;  
    left:0;  
    width:100%;  
    height:100%;  
    z-index:300;  
    background-image:url(../images/loading.gif);  
    background-repeat:no-repeat;  
    background-position:center center;  
    background-color:#fff;  
    background-color:rgba(256,256,256,0.5);  
    filter:alpha(opacity=50);  
}