在Ajax進(jìn)行后臺(tái)數(shù)據(jù)請(qǐng)求的過(guò)程中，我們有時(shí)候會(huì)希望用戶能知道頁(yè)面后臺(tái)還在做一些事情，這時(shí)候就需要給用戶一個(gè)非常明確的提示，也就是我們所謂的進(jìn)度條

實(shí)現(xiàn)原理：

Jquery可以對(duì)ajax進(jìn)行全局的設(shè)置，實(shí)現(xiàn)類似于C#中面向切面的效果，即對(duì)在Ajax提交之前和提交完成之后，我們均可以對(duì)其進(jìn)行一系列的操作，所以我們可以在ajax開(kāi)始的時(shí)候，把Loading框顯示出來(lái)，在ajax請(qǐng)求完成之后，把loading框關(guān)閉掉，基本上就完美實(shí)現(xiàn)這個(gè)效果了。

Jquery全局配置Ajax的方式為：

$.ajaxSetup({
beforeSend: function () {
//ajax請(qǐng)求之前
},
complete: function () {
//ajax請(qǐng)求完成，不管成功失敗
},
error: function () {
//ajax請(qǐng)求失敗
}
});

當(dāng)然，beforeSend/complete/error這些配置在單個(gè)的ajax中也是可以去配置的，把他寫在ajaxSetup，并且放到公共的頁(yè)面上，他就是全局的啦~

最后獻(xiàn)上代碼吧，我這里在做的時(shí)候，為了方便，直接使用了layer這個(gè)插件來(lái)實(shí)現(xiàn)loading的效果，并沒(méi)有手動(dòng)去寫css畢竟這不是咱強(qiáng)項(xiàng)~有能力的同學(xué)可以自己去寫一下這個(gè)loading的效果，用js手動(dòng)控制其顯示隱藏的方式來(lái)實(shí)現(xiàn)~如果要直接copy，那么請(qǐng)引入layer,傳送門：http://layer.layui.com/

這里有一點(diǎn)需要說(shuō)明的是，當(dāng)同時(shí)存在多個(gè)ajax時(shí)，可能會(huì)一個(gè)加載完了，就把其他的全都關(guān)掉了，對(duì)于這個(gè)，我能想到的有如下兩種解決方案：

■我目前的解決辦法是讓他打開(kāi)多個(gè)（坐標(biāo)都一樣，看不出來(lái)），然后關(guān)的時(shí)候哪個(gè)結(jié)束了就關(guān)哪個(gè)，我這里的做法是給ajaxSetup里面增加了個(gè)index參數(shù)（這玩意兒只能寫到設(shè)置的對(duì)象里面，不然還是所有的ajax共享同一個(gè)）,有了index,應(yīng)該就怎么玩都行了。

■還有一種解決方案適合于自己去寫這個(gè)控制邏輯，只顯示一個(gè)加載框，在加載框上寫個(gè)當(dāng)前有多少ajax在執(zhí)行的參數(shù)類似于<div data-ajax-count='0'></div>,每次開(kāi)始或結(jié)束的時(shí)候，去維護(hù)ajax-cout的值，并且在ajax結(jié)束的時(shí)候去判斷，如果這個(gè)data-ajax-count小于等于0了，把div隱藏起來(lái)，應(yīng)該也是可以的，這種辦法我并沒(méi)有實(shí)踐.

$(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('部分?jǐn)?shù)據(jù)加載失敗，可能會(huì)導(dǎo)致頁(yè)面顯示異常，請(qǐng)刷新后重試', {
skin: 'layui-layer-molv'
, closeBtn: 0
, shift: 4 //動(dòng)畫類型
});
}
});
}); 

以上所述是小編給大家介紹的Ajax全局加載框(Loading效果)的配置的全部敘述，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)，歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的，在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論