Ajax中怎么配置全局加載框，相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

創(chuàng)新互聯(lián)公司專注于鄢陵企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開發(fā),商城開發(fā)。鄢陵網(wǎng)站建設(shè)公司,為鄢陵等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站設(shè)計，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

實現(xiàn)原理：

Jquery可以對ajax進(jìn)行全局的設(shè)置，實現(xiàn)類似于C#中面向切面的效果，即對在Ajax提交之前和提交完成之后，我們均可以對其進(jìn)行一系列的操作，所以我們可以在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，并且放到公共的頁面上，他就是全局的啦~

最后獻(xiàn)上代碼吧，我這里在做的時候，為了方便，直接使用了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ù)類似于

,每次開始或結(jié)束的時候，去維護(hù)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('部分?jǐn)?shù)據(jù)加載失敗，可能會導(dǎo)致頁面顯示異常，請刷新后重試', {
skin: 'layui-layer-molv'
, closeBtn: 0
, shift: 4 //動畫類型
});
}
});
});

看完上述內(nèi)容，你們掌握Ajax中怎么配置全局加載框的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

分享題目：Ajax中怎么配置全局加載框
本文網(wǎng)址：http://weahome.cn/article/gdjehj.html