Ajax全域性載入框 Loading效果的配置

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

廢話完成~

實現原理：

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

jquery全域性配置ajax的方式為：

1
$.ajaxsetup(,
5 complete: function
() ,
8 error: function
() 11 });

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

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

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

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

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

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

$(function
() );
},complete: 
function
() ,
error: 
function
() );
}});
});

Ajax全域性載入框 Loading效果 的配置