這次帶給大家優化ajax請求伺服器載入資料清單等待的使用者體驗，優化ajax請求伺服器載入資料清單等待使用者體驗的注意事項有哪些，以下是實戰案例，一起來看一下。 我們利用weui.js中的weui.loading為效果，ajax的beforeSend與complete方法，做一個載入資料時會有幾秒鐘的loading... 要在頁面需要載入的JS檔： #</p> <p style="text-align: left;">可以去weui的文件下載，這是它的demo: <a href="http://www.php.cn/wiki/373.html" target="_blank">https://</a>weui.io/weui.js/</p> <p style="text-align: left;">#這裡主要講<a href="http://www.php.cn/wiki/1495.html" target="_blank">jQuery</a> ajax的get，<a href="http://www.php.cn/php/php-tp-demand.html" target="_blank">查詢</a>資料時，它的結構為：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>$.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('数据加载失败！'); } })</pre><div class="contentsignin">登入後複製</div></div> <p>相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ </p> <p>推薦閱讀：</p> <p><a href="http://www.php.cn/js-tutorial-391149.html" target="_blank">Ajax不刷新的情況下實現分頁效果</a><br></p> <p><a href="http://www.php.cn/js-tutorial-391139.html" target="_blank">用ajax實現session超時跳到登入頁面</a><br></p>
