巧用ajax請求服務器加載數(shù)據(jù)列表時提示loading的方法
更新時間：2017年04月17日 10:33:15 投稿：jingxian
下面小編就為大家?guī)硪黄捎胊jax請求服務器加載數(shù)據(jù)列表時提示loading的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
我們利用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ù)時，它的結構為：
$.ajax({
type: 'get',
url: url,
data: data,
dataType: 'json',
contentType: 'apllication/json; charset=utf-8' ,
//數(shù)據(jù)加載前調用的方法 beforeSend()
beforeSend: function(data){
//這里判斷，如果沒有加載數(shù)據(jù)，會顯示loading
if(data.readyState == 0){
weui.loading('loading');
}
},
//數(shù)據(jù)加載成功調用的方法 sucess()
sucess: function(data){
//這里寫數(shù)據(jù)加載成功后，會執(zhí)行的代碼
},
//數(shù)據(jù)加載成功后調用的方法 complete()
complete: function(data){
//這里判斷，數(shù)據(jù)加載成功之后，loading 隱藏
if(data.status == 200){
setTimeOut(function(){
weui.loading('loading').hide();
},500);
}
},
//數(shù)據(jù)加載錯誤后調用的方法 error()
error: function(data){
weui.topTips('數(shù)據(jù)加載失??！');
}
})
以上這篇巧用ajax請求服務器加載數(shù)據(jù)列表時提示loading的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
使用Ajax進行文件與其他參數(shù)的上傳功能(java開發(fā))
這篇文章主要介紹了使用Ajax進行文件與其他參數(shù)的上傳功能(java開發(fā)),非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-01-01
在web頁面中使用ajax加載進度條，可以讓用戶預先判斷等待的時間，而且還可以減少用戶等待信息加載過程中的心理焦慮感，所以進度條加載必不可少，下面小編給大家介紹ajax加載進度條代碼是如何實現(xiàn)的2015-10-10
這篇文章主要介紹了AjaxSubmit()提交file文件的實例講解,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
默認設置下，所有請求均為異步請求。如果需要發(fā)送同步請求，請將此選項設置為 false。注意，同步請求將鎖住瀏覽器，用戶其它操作必須等待請求完成才可以執(zhí)行2012-04-04
這篇文章主要介紹了Fly攔截全局Ajax請求的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
讓ajax更加友好的實現(xiàn)方法(實時顯示后臺處理進度。)
我們能否讓ajax更加友好點，實時顯示服務器處理的進度了？這在一些長時間的請求中尤其重要，比如上傳文件、發(fā)送郵件、批量處理數(shù)據(jù)。2010-06-06
layPage是一款多功能的js分頁組件，即適用于異步分頁，又可用于傳統(tǒng)的整頁刷新跳頁，還支持信息流加載，并且可無縫遷移至Node.js平臺，這篇文章主要介紹了laypage前端分頁插件，實現(xiàn)ajax異步分頁,需要的朋友可以參考下2016-05-05
用AJAX技術聚合RSS...2007-02-02
ajax(異步javascript xml) 能夠刷新局部網(wǎng)頁數(shù)據(jù)而不是重新加載整個網(wǎng)頁。接下來通過本文給大家介紹Ajax的使用四大步驟，非常不錯，感興趣的朋友看下吧2016-07-07
本篇文章通過兩種方法實例講解ajax定時刷新局部頁面，當然方法有很多種，也可以不使用ajax來刷新頁面，可以使用jquery中的append來給指定內(nèi)容加東西，但是都不太實用，最實用的方法還是ajax加載數(shù)據(jù)了。2015-09-09