優化ajax請求伺服器載入資料列表等待的使用者體驗

這次帶給大家優化ajax請求伺服器載入資料清單等待的使用者體驗，優化ajax請求伺服器載入資料清單等待使用者體驗的注意事項有哪些，以下是實戰案例，一起來看一下。

我們利用weui.js中的weui.loading為效果，ajax的beforeSend與complete方法，做一個載入資料時會有幾秒鐘的loading...

要在頁面需要載入的JS檔：

#

可以去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('数据加载失败！');
  }
})

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Ajax不刷新的情況下實現分頁效果

用ajax實現session超時跳到登入頁面

以上是優化ajax請求伺服器載入資料列表等待的使用者體驗的詳細內容。更多資訊請關注PHP中文網其他相關文章！