這次帶給大家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實現Loading效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!