我們利用weui.js中的weui.loading為效果,ajax的beforeSend與complete方法,做一個加載數(shù)據(jù)時會有幾秒的 loading...
要在頁面需要加載的JS文件:
<script src="../js/libs/weui.min.js"></script>
可以去weui的文檔中下載,這是它的demo: https://weui.io/weui.js/
這里主要講jQuery ajax的get,查詢數(shù)據(jù)時,它的結(jié)構(gòu)為:
$.ajax({ type: 'get', url: url, data: data, dataType: 'json', contentType: 'apllication/json; charset=utf-8' , //數(shù)據(jù)加載前調(diào)用的方法 beforeSend() beforeSend: function(data){ //這里判斷,如果沒有加載數(shù)據(jù),會顯示loading if(data.readyState == 0){ weui.loading('loading'); } }, //數(shù)據(jù)加載成功調(diào)用的方法 sucess() sucess: function(data){ //這里寫數(shù)據(jù)加載成功后,會執(zhí)行的代碼 }, //數(shù)據(jù)加載成功后調(diào)用的方法 complete() complete: function(data){ //這里判斷,數(shù)據(jù)加載成功之后,loading 隱藏 if(data.status == 200){ setTimeOut(function(){ weui.loading('loading').hide(); },500); } }, //數(shù)據(jù)加載錯誤后調(diào)用的方法 error() error: function(data){ weui.topTips('數(shù)據(jù)加載失??!'); } })
相信看了本文案例你已經(jīng)掌握了方法,更多精彩請關(guān)注Gxl網(wǎng)其它相關(guān)文章!
推薦閱讀:
Ajax不刷新的情況下實現(xiàn)分頁效果
用ajax實現(xiàn)session超時跳轉(zhuǎn)到登錄頁面
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com