這次帶給大家優化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請求伺服器載入資料列表等待的使用者體驗的詳細內容。更多資訊請關注PHP中文網其他相關文章!