Ajax實現Loading效果

這次帶給大家Ajax實現Loading效果，Ajax實現Loading效果的注意事項有哪些，下面就是實戰案例，一起來看一下。

在Ajax進行後台資料請求的過程中，我們有時候會希望使用者能知道頁面後台還在做一些事情，這時候就需要給使用者一個非常明確的提示，也就是我們所謂的進度條

實作原理：

#Jquery可以對ajax進行全域的設置，實現類似於C#中面向切面的效果，即對在Ajax提交之前和提交完成之後，我們均可以對其進行一系列的操作，所以我們可以在ajax開始的時候，把Loading框顯示出來，在ajax請求完成之後，把loading框關閉掉，基本上就完美實現這個效果了。

Jquery全域配置Ajax的方式為：

$.ajaxSetup({
beforeSend: function () {
//ajax请求之前
},
complete: function () {
//ajax请求完成，不管成功失败
},
error: function () {
//ajax请求失败
}
});

當然，beforeSend/complete/error這些配置在單一的ajax中也是可以去配置的，把他寫在ajaxSetup，並且放到公共的頁面上，他就是全局的啦~

#最後獻上代碼吧，我這裡在做的時候，為了方便，直接使用了layer這個插件來實現loading的效果，並沒有手動去寫css畢竟這不是咱強項~有能力的同學可以自己去寫一下這個loading的效果，用js手動控制其顯示隱藏的方式來實現~如果要直接copy，那麼請引入layer,傳送門：http://layer.layui.com/

這裡有一點需要說明的是，當同時存在多個ajax時，可能會一個加載完了，就把其他的全都關掉了，對於這個，我能想到的有以下兩種解決方案：

■我目前的解決辦法是讓他打開多個（坐標都一樣，看不出來），然後關的時候哪個結束了就關哪個，我這裡的做法是給ajaxSetup裡面增加了個index參數（這玩意兒只能寫到設置的對象裡面，不然還是所有的ajax共享同一個）,有了index,應該就怎麼玩都行了。

■還有一個解決方案適合自己去寫這個控制邏輯，只顯示一個載入框，在載入框上寫個目前有多少ajax在執行的參數類似於

,每次開始或結束的時候，去維護ajax-cout的值，並且在ajax結束的時候去判斷，如果這個data-ajax-count小於等於0了，把p隱藏起來，應該也是可以的，這種辦法我並沒有實踐.

$(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('部分数据加载失败，可能会导致页面显示异常，请刷新后重试', {
skin: 'layui-layer-molv'
, closeBtn: 0
, shift: 4 //动画类型
});
}
});
});

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

ajax php控制函數呼叫步驟詳解

AJAX請求佇列的使用詳解

以上是Ajax實現Loading效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！