Ajax全局加載框(Loading效果)的配置
在Ajax進行后臺數(shù)據(jù)請求的過程中,我們有時候會希望用戶能知道頁面后臺還在做一些事情,這時候就需要給用戶一個非常明確的提示,也就是我們所謂的進度條
實現(xiàn)原理:
Jquery可以對ajax進行全局的設(shè)置,實現(xiàn)類似于C#中面向切面的效果,即對在Ajax提交之前和提交完成之后,我們均可以對其進行一系列的操作,所以我們可以在ajax開始的時候,把Loading框顯示出來,在ajax請求完成之后,把loading框關(guān)閉掉,基本上就完美實現(xiàn)這個效果了。
Jquery全局配置Ajax的方式為:
$.ajaxSetup({ beforeSend: function () { //ajax請求之前 }, complete: function () { //ajax請求完成,不管成功失敗 }, error: function () { //ajax請求失敗 } });
當(dāng)然,beforeSend/complete/error這些配置在單個的ajax中也是可以去配置的,把他寫在ajaxSetup,并且放到公共的頁面上,他就是全局的啦~
最后獻上代碼吧,我這里在做的時候,為了方便,直接使用了layer這個插件來實現(xiàn)loading的效果,并沒有手動去寫css畢竟這不是咱強項~有能力的同學(xué)可以自己去寫一下這個loading的效果,用js手動控制其顯示隱藏的方式來實現(xiàn)~如果要直接copy,那么請引入layer,傳送門:http://layer.layui.com/
這里有一點需要說明的是,當(dāng)同時存在多個ajax時,可能會一個加載完了,就把其他的全都關(guān)掉了,對于這個,我能想到的有如下兩種解決方案:
■我目前的解決辦法是讓他打開多個(坐標(biāo)都一樣,看不出來),然后關(guān)的時候哪個結(jié)束了就關(guān)哪個,我這里的做法是給ajaxSetup里面增加了個index參數(shù)(這玩意兒只能寫到設(shè)置的對象里面,不然還是所有的ajax共享同一個),有了index,應(yīng)該就怎么玩都行了。
■還有一種解決方案適合于自己去寫這個控制邏輯,只顯示一個加載框,在加載框上寫個當(dāng)前有多少ajax在執(zhí)行的參數(shù)類似于<div data-ajax-count='0'></div>,每次開始或結(jié)束的時候,去維護ajax-cout的值,并且在ajax結(jié)束的時候去判斷,如果這個data-ajax-count小于等于0了,把div隱藏起來,應(yīng)該也是可以的,這種辦法我并沒有實踐.
$(function () { $.ajaxSetup({ layerIndex:-1, beforeSend: function () { this.layerIndex = layer.load(0, { shade: [0.5, '#393D49'] }); }, complete: function () { layer.close(this.layerIndex); }, error: function () { layer.alert('部分數(shù)據(jù)加載失敗,可能會導(dǎo)致頁面顯示異常,請刷新后重試', { skin: 'layui-layer-molv' , closeBtn: 0 , shift: 4 //動畫類型 }); } }); });
以上所述是小編給大家介紹的Ajax全局加載框(Loading效果)的配置的全部敘述,希望對大家有所幫助,如果大家有任何疑問,歡迎給我留言,小編會及時回復(fù)大家的,在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
.NET2.0環(huán)境下的Ajax選型和應(yīng)用(提供Demo源碼下載)
.NET2.0環(huán)境下的Ajax選型和應(yīng)用(提供Demo源碼下載)...2007-05-05PHP+AJAX無刷新實現(xiàn)返回天氣預(yù)報數(shù)據(jù)
天氣數(shù)據(jù)是通過采集中國氣象網(wǎng)站的。本來中國天氣網(wǎng)站也給出了數(shù)據(jù)的API接口,接下來為大家介紹下用php來寫一個天氣預(yù)報的模塊,感興趣的朋友可以參考下2013-07-07用ajax實現(xiàn)在單擊事件下加載一個DIV層的腳本
用ajax實現(xiàn)在單擊事件下加載一個DIV層的腳本...2007-11-11