ajax提交加载进度条示例代码
更新时间：2013年10月14日 17:55:12 作者：
提交加载进度条的实现方法有很多，在本文将为大家详细介绍下，使用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>
js
<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();
}
});
加载图片
实现方式:
在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>
js
复制代码 代码如下:
<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();
}
});
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了ajax 实现微信网页授权登录的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
ajax post方式表单提交setRequestHeader报错解决方法
ajax post方式表单提交设置异步对象的xhr.setRequestHeader，在谷歌浏览器的编译器中显示传值在Request Payload中这是错误的2014-09-09
写这个学习笔记，只是记载一下自己的学习经过和体会，把一些学习重点记录下来，以备今后的巩固复习及应用，很多知识点没有详细介绍，所以并不完全适用于初学者，如果你是初学者，最好选择一本AJAX学习的书籍，然后与这篇学习笔记对照学习，效果会更好。2009-09-09
这篇文章主要为大家详细介绍了ajax无刷新验证注册信息示例,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要介绍了用ajax实现读博客rss的具体实现，需要的朋友可以参考下2014-05-05
要通过ajax保存表单，一切都OK，测试也通过，却发现文件没有上传成功！然后就有了用 ajax是否可以上传文件的疑问。2011-01-01
本文重点给大家介绍在ajax中使用get和post所遇到的问题及解决办法，及get请求和post请求的区别简单介绍，本文介绍的非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧2016-06-06
我很开心您来阅读我写的关于ajax的实例教程,无论您是第一次还是老朋友.我将在这里献上我至今所学,并毫不吝啬。2010-10-10
这篇文章主要为大家详细介绍了Ajax+PHP简单数据交互,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要介绍了SpringMVC+Ajax+拼接html字符串实例代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-03-03
最新评论