巧用ajax請(qǐng)求服務(wù)器加載數(shù)據(jù)列表時(shí)提示loading的方法
我們利用weui.js中的weui.loading為效果,ajax的beforeSend與complete方法,做一個(gè)加載數(shù)據(jù)時(shí)會(huì)有幾秒的 loading...
要在頁(yè)面需要加載的JS文件:
<script src="../js/libs/weui.min.js"></script>
可以去weui的文檔中下載,這是它的demo: https://weui.io/weui.js/
這里主要講jQuery ajax的get,查詢數(shù)據(jù)時(shí),它的結(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){ //這里判斷,如果沒(méi)有加載數(shù)據(jù),會(huì)顯示loading if(data.readyState == 0){ weui.loading('loading'); } }, //數(shù)據(jù)加載成功調(diào)用的方法 sucess() sucess: function(data){ //這里寫(xiě)數(shù)據(jù)加載成功后,會(huì)執(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ù)加載錯(cuò)誤后調(diào)用的方法 error() error: function(data){ weui.topTips('數(shù)據(jù)加載失敗!'); } })
以上這篇巧用ajax請(qǐng)求服務(wù)器加載數(shù)據(jù)列表時(shí)提示loading的方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Ajax刪除數(shù)據(jù)與查看數(shù)據(jù)操作
這篇文章主要介紹了Ajax刪除數(shù)據(jù)與查看數(shù)據(jù)操作,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03Ajax實(shí)現(xiàn)跨域訪問(wèn)的三種方法
本文給大家介紹了ajax實(shí)現(xiàn)跨域訪問(wèn)的3種解決方案,非常的實(shí)用,個(gè)人比較推薦第三種,小伙伴們可以著重看下。2015-06-06Ajax 動(dòng)態(tài)載入html頁(yè)面后不能執(zhí)行其中的js快速解決方法
這篇文章主要介紹了Ajax 動(dòng)態(tài)載入html頁(yè)面后不能執(zhí)行其中的js快速解決方法,需要的朋友可以參考下2018-06-06使用ajax實(shí)現(xiàn)無(wú)刷新改變頁(yè)面內(nèi)容和地址欄URL
本文主要詳細(xì)介紹了使用ajax和window.history.pushState無(wú)刷新改變頁(yè)面內(nèi)容和地址欄URL的方法,需要的朋友可以參考下2015-03-03實(shí)現(xiàn)類似facebook無(wú)刷新ajax更新
這篇文章主要介紹了實(shí)現(xiàn)類似facebook無(wú)刷新ajax更新,需要的朋友可以參考下2014-03-03HTTP狀態(tài)代碼及其定義解析 Ajax捕捉回調(diào)錯(cuò)誤參考
當(dāng)用戶試圖通過(guò) HTTP 訪問(wèn)一臺(tái)正在運(yùn)行 Internet 信息服務(wù) (IIS) 的服務(wù)器上的內(nèi)容時(shí),IIS 返回一個(gè)表示該請(qǐng)求的狀態(tài)的數(shù)字代碼。狀態(tài)代碼可以指明具體請(qǐng)求是否已成功,還可以揭示請(qǐng)求失敗的確切原因2013-11-11Ajax+smarty技術(shù)實(shí)現(xiàn)無(wú)刷新分頁(yè)
這篇文章主要介紹了Ajax+smarty技術(shù)實(shí)現(xiàn)無(wú)刷新分頁(yè)的相關(guān)資料,需要的朋友可以參考下2016-03-03Ajax獲取回調(diào)函數(shù)無(wú)法賦值給全局變量的問(wèn)題
這篇文章主要介紹了Ajax獲取回調(diào)函數(shù)無(wú)法賦值給全局變量的問(wèn)題,需要的朋友可以參考下2018-06-06