巧用ajax請求服務器加載數據列表時提示loading


我們利用weui.js中的weui.loading為效果,ajax的beforeSend與complete方法,做一個加載數據時會有幾秒的 loading...

要在頁面需要加載的JS文件:

<script src="../js/libs/weui.min.js"></script>

可以去weui的文檔中下載,這是它的demo:   https://weui.io/weui.js/

這里主要講jQuery ajax的get,查詢數據時,它的結構為:

$.ajax({
   type: 'get',
   url: url,
   data: data,
   dataType: 'json',
   contentType: 'apllication/json; charset=utf-8' ,
   //數據加載前調用的方法 beforeSend()
   beforeSend: function(data){
     //這里判斷,如果沒有加載數據,會顯示loading        
      if(data.readyState == 0){ 
          weui.loading('loading');     
      }
    },
    //數據加載成功調用的方法  sucess()
    sucess: function(data){
       //這里寫數據加載成功后,會執行的代碼
    },   
    //數據加載成功后調用的方法   complete()
    complete: function(data){
        //這里判斷,數據加載成功之后,loading 隱藏
       if(data.status == 200){
           setTimeOut(function(){
                weui.loading('loading').hide();
           },500);
       }
    },
   //數據加載錯誤后調用的方法 error()
   error: function(data){
        weui.topTips('數據加載失敗!');
   }
})

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM