AJAX异步请求增加Loading

最新推荐文章于 2023-08-11 16:55:48 发布

门没锁啊

最新推荐文章于 2023-08-11 16:55:48 发布

阅读量3.1k

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/jwiang/article/details/52850703

版权

JavaWeb 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

AJAX异步请求增加Loading gif

1.准备好使用的gif图片

2.在jsp页面中添加css样式

<style>  
.loadingWrap{  
    position:fixed;  
    top:0;  
    left:0;  
    width:100%;  
    height:100%;  
    z-index:300;  
    background-image:url(${ctx}/webapp/img/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>

3.在AJAX中进行调用

function downloadTaskPackageRel(projectId){
  	$.ajax({
		url : ctx + '/exportTaskPackageRel.do',
		type : 'POST',
		dataType : 'json',
		data : {
			projectId:projectId,
		},
		success : function(data) {
//			alert(data.msg);
			$("#msg").val(data.msg);
			downLoadExportFile(data.fileName);
		},
		error : function() {
		},
		beforeSend: function(){    
            <span style="color:#ff6666;">$('<div class="loadingWrap"></div>').appendTo("body");</span>
        },   
        complete: function(){    
           <span style="color:#ff6666;"> $(".loadingWrap").remove();</span>
        }  
	});
}