巧用ajax請求伺服器載入資料列表時提示loading

標籤：charset   ajax   服務   tps   失敗   url   com   type   content   

我們利用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(‘資料載入失敗！‘);   }})

 

巧用ajax請求伺服器載入資料列表時提示loading