ajax提交加載進(jìn)度條示例代碼
更新時(shí)間：2013年10月14日 17:55:12 作者：
提交加載進(jìn)度條的實(shí)現(xiàn)方法有很多，在本文將為大家詳細(xì)介紹下，使用ajax是如何實(shí)現(xiàn)的，下面有個(gè)不錯(cuò)的示例，大家可以感受下
實(shí)現(xiàn)效果圖
加載圖片
實(shí)現(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é)點(diǎn)
<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();
}
});
加載圖片
實(shí)現(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é)點(diǎn)
復(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 實(shí)現(xiàn)微信網(wǎng)頁授權(quán)登錄的方法
這篇文章主要介紹了ajax 實(shí)現(xiàn)微信網(wǎng)頁授權(quán)登錄的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
ajax post方式表單提交setRequestHeader報(bào)錯(cuò)解決方法
ajax post方式表單提交設(shè)置異步對象的xhr.setRequestHeader，在谷歌瀏覽器的編譯器中顯示傳值在Request Payload中這是錯(cuò)誤的2014-09-09
揭開AJAX神秘的面紗(AJAX個(gè)人學(xué)習(xí)筆記)
寫這個(gè)學(xué)習(xí)筆記，只是記載一下自己的學(xué)習(xí)經(jīng)過和體會(huì)，把一些學(xué)習(xí)重點(diǎn)記錄下來，以備今后的鞏固復(fù)習(xí)及應(yīng)用，很多知識點(diǎn)沒有詳細(xì)介紹，所以并不完全適用于初學(xué)者，如果你是初學(xué)者，最好選擇一本AJAX學(xué)習(xí)的書籍，然后與這篇學(xué)習(xí)筆記對照學(xué)習(xí)，效果會(huì)更好。2009-09-09
這篇文章主要為大家詳細(xì)介紹了ajax無刷新驗(yàn)證注冊信息示例,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了用ajax實(shí)現(xiàn)讀博客rss的具體實(shí)現(xiàn)，需要的朋友可以參考下2014-05-05
要通過ajax保存表單，一切都OK，測試也通過，卻發(fā)現(xiàn)文件沒有上傳成功！然后就有了用 ajax是否可以上傳文件的疑問。2011-01-01
本文重點(diǎn)給大家介紹在ajax中使用get和post所遇到的問題及解決辦法，及get請求和post請求的區(qū)別簡單介紹，本文介紹的非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
我很開心您來閱讀我寫的關(guān)于ajax的實(shí)例教程,無論您是第一次還是老朋友.我將在這里獻(xiàn)上我至今所學(xué),并毫不吝嗇。2010-10-10
這篇文章主要為大家詳細(xì)介紹了Ajax+PHP簡單數(shù)據(jù)交互,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
SpringMVC+Ajax+拼接html字符串實(shí)例代碼
這篇文章主要介紹了SpringMVC+Ajax+拼接html字符串實(shí)例代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03