ajax提交加載進度條示例代碼
更新時間：2013年10月14日 17:55:12 作者：
提交加載進度條的實現(xiàn)方法有很多，在本文將為大家詳細介紹下，使用ajax是如何實現(xiàn)的，下面有個不錯的示例，大家可以感受下
實現(xiàn)效果圖
加載圖片
實現(xiàn)方式:
在jsp頁面中加入
樣式
.progress{z-index: 2000}
.mask{position: fixed;top: 0;right: 0;bottom: 0;left: 0; z-index: 1000; background-color: #2F2F2F}
節(jié)點
<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();
}
});
加載圖片
實現(xiàn)方式:
在jsp頁面中加入
樣式
復(fù)制代碼 代碼如下:
.progress{z-index: 2000}
.mask{position: fixed;top: 0;right: 0;bottom: 0;left: 0; z-index: 1000; background-color: #2F2F2F}
節(jié)點
復(fù)制代碼 代碼如下:
<img id="progressImgage" class="progress" style="display:none" alt="" src="/ajax-loader.gif"/>
<div id="maskOfProgressImage" class="mask" style="display:none"></div>
js
復(fù)制代碼 代碼如下:
<p> </p><p>var img = $("#progressImgage");
var mask = $("#maskOfProgressImage");</p>
復(fù)制代碼 代碼如下:
$.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();
}
});
您可能感興趣的文章:
相關(guān)文章
AJAX實現(xiàn)跨域的三種方法（代理,JSONP,XHR2）
這篇文章主要介紹了AJAX實現(xiàn)跨域的三種方法（代理,JSONP,XHR2）的相關(guān)資料,需要的朋友可以參考下2016-03-03
DWR util.js 學習筆記 整理...2007-05-05
支持跨域的Ajax異步(請求)提交類2009-07-07
用javascript實現(xiàn)頁面無刷新更新數(shù)據(jù)
用javascript實現(xiàn)頁面無刷新更新數(shù)據(jù)...2006-06-06
這篇文章主要介紹了Ajax返回值類型與用法,結(jié)合實例形式分析了ajax返回值的xml類型與文本類型詳細分類、用法與相關(guān)操作注意事項,需要的朋友可以參考下2019-07-07
你的jquery ajax無效和你的jquery引入路徑有關(guān)
當你發(fā)現(xiàn)你的jquery ajax無效的時候,不妨使用 fire bug調(diào)試一下，這時你會發(fā)現(xiàn)，提示"$"無效，為什么會有這種提示呢？可能是你引入jquery.js的路徑有問題2013-06-06
如何解決Ajax訪問不斷變化的session的值不一致以及HTTP協(xié)議中的GET、POST的區(qū)別
這篇文章主要介紹了Ajax訪問不斷變化的session的值不一致解決方法以及HTTP協(xié)議中的GET、POST的區(qū)別的相關(guān)資料,需要的朋友可以參考下2015-09-09
關(guān)于Ajax異步請求后臺數(shù)據(jù)進行動態(tài)分頁功能
這篇文章主要介紹了Ajax異步請求后臺數(shù)據(jù)進行動態(tài)分頁功能，本文通過實例代碼給大家介紹的非常詳細，感興趣的朋友一起看看吧2018-06-06
本篇文章通過兩種方法實例講解ajax定時刷新局部頁面，當然方法有很多種，也可以不使用ajax來刷新頁面，可以使用jquery中的append來給指定內(nèi)容加東西，但是都不太實用，最實用的方法還是ajax加載數(shù)據(jù)了。2015-09-09
這篇文章主要介紹了Ajax的優(yōu)點與缺點的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-11-11