手机
当前位置:查字典教程网 >编程开发 >AJAX相关 >ajax提交加载进度条示例代码
ajax提交加载进度条示例代码
摘要:实现效果图加载图片实现方式:在jsp页面中加入样式复制代码代码如下:.progress{z-index:2000}.mask{positio...

实现效果图

1

加载图片

2

实现方式:

在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" src="http://www.jb51.netajax-loader.gif"/>

<div id="maskOfProgressImage"></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提交加载进度条示例代码】相关文章:

js ajax加载时的进度条代码

Ajax中通过JS代码自动获取表单元素值的示例代码

Ajax 生成流文件下载(实现代码)

Ajax动态加载数据库示例

Ajax叠加(Ajax返回数据用Ajax发出)示例代码

Ajax级联菜单实例代码

js基本ajax写法示例代码

Ajax请求内嵌套Ajax请求示例代码

Ajax方式删除表格一行数据示例代码

Ajax核心技术代码分享

精品推荐
分类导航