您现在的位置是：网站首页> 编程资料编程资料
ajax提交加载进度条示例代码_AJAX相关_
2023-05-25
269人已围观
简介 ajax提交加载进度条示例代码_AJAX相关_
实现效果图
加载图片
实现方式:
在jsp页面中加入
样式
.progress{z-index: 2000}
.mask{position: fixed;top: 0;right: 0;bottom: 0;left: 0; z-index: 1000; background-color: #2F2F2F}
节点
js
$.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}
节点
复制代码 代码如下:
js
复制代码 代码如下:
var img = $("#progressImgage");
var mask = $("#maskOfProgressImage");
复制代码 代码如下:
$.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();
}
});
您可能感兴趣的文章:
相关内容
- jQuery ajax中使用serialize()方法提交表单数据示例_AJAX相关_
- ajax jquery校验用户是否已经注册演示代码_AJAX相关_
- 利用ajax实现简单的注册验证局部刷新实例_AJAX相关_
- ajax异步回调函数中给外部变量赋值的问题探讨_AJAX相关_
- Ajax获得站点文件内容实例_AJAX相关_
- ajax的工作原理以及异步请求的封装介绍_AJAX相关_
- 提交表单最简单的AJAX程序分享_AJAX相关_
- ajax的两种提交方式(get/post)和两种版本_AJAX相关_
- AJAX实现鼠标经过弹出详细介绍示例_AJAX相关_
- ajax JSONP请求处理回调函数jsonpCallback区分大小写_AJAX相关_
