OGeek|极客世界-中国程序员成长平台 › 门户 ›编程› AJAX› AJAX编程经验 › 查看内容

ajax提交加载进度条示例代码

2022-2-5 16:58| 发布者: 菜鸟教程小白| 查看: 241| 评论: 0|原作者: [db:作者]|来自: [db:来源]

摘要: 提交加载进度条的实现方法有很多，在本文将为大家详细介绍下，使用ajax是如何实现的，下面有个不错的示例，大家可以感受下

实现效果图

加载图片

实现方式:

在jsp页面中加入

样式

 
.progress{z-index: 2000} 
.mask{position: fixed;top: 0;right: 0;bottom: 0;left: 0; z-index: 1000; background-color: #2F2F2F} 

节点

复制代码代码如下:

 
<img id="progressImgage" class="progress" style="display:none" alt="" src="/ajax-loader.gif"/> 
<div id="maskOfProgressImage" class="mask" style="display:none"></div> 

复制代码代码如下:

 
<p> </p><p>var img = $("#progressImgage"); 
var mask = $("#maskOfProgressImage");</p> 

复制代码代码如下:

 
$.ajax({ 
url:url, 
type:"post", 
dataType:"json", 
data:data, 
beforeSend:function(xhr){ 
img.show().css({ 
"position": "fixed", 
"top": "40%", 
"left": "45%", 
"margin-top": function () { return -1 * img.height() / 2; }, 
"margin-left": function () { return -1 * img.width() / 2; } 
}); 
mask.show().css("opacity", "0.1"); 
}, 
success:function(result){ 
doSuccess() 
}, 
complete:function(xhr){ 
img.hide(); 
mask.hide(); 

} 
}); 