我們利用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，查詢(xún)數(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è)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:- Ajax全局加載框(Loading效果)的配置
- ajax異步請(qǐng)求詳解
