快捷導(dǎo)航

巧用ajax請(qǐng)求服務(wù)器加載數(shù)據(jù)列表時(shí)提示loading的方法

更新時(shí)間：2017年04月17日 10:33:15 投稿：jingxian

下面小編就為大家?guī)?lái)一篇巧用ajax請(qǐng)求服務(wù)器加載數(shù)據(jù)列表時(shí)提示loading的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

我們利用weui.js中的weui.loading為效果，ajax的beforeSend與complete方法，做一個(gè)加載數(shù)據(jù)時(shí)會(huì)有幾秒的 loading...

要在頁(yè)面需要加載的JS文件：

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

這里主要講jQuery ajax的get，查詢數(shù)據(jù)時(shí)，它的結(jié)構(gòu)為：

$.ajax({
  type: 'get',
  url: url,
  data: data,
  dataType: 'json',
  contentType: 'apllication/json; charset=utf-8' ,
  //數(shù)據(jù)加載前調(diào)用的方法 beforeSend()
  beforeSend: function(data){
   //這里判斷，如果沒(méi)有加載數(shù)據(jù)，會(huì)顯示loading    
   if(data.readyState == 0){ 
     weui.loading('loading');   
   }
  },
  //數(shù)據(jù)加載成功調(diào)用的方法 sucess()
  sucess: function(data){
    //這里寫數(shù)據(jù)加載成功后，會(huì)執(zhí)行的代碼
  },  
  //數(shù)據(jù)加載成功后調(diào)用的方法  complete()
  complete: function(data){
    //這里判斷，數(shù)據(jù)加載成功之后，loading 隱藏
    if(data.status == 200){
      setTimeOut(function(){
        weui.loading('loading').hide();
      },500);
    }
  },
  //數(shù)據(jù)加載錯(cuò)誤后調(diào)用的方法 error()
  error: function(data){
    weui.topTips('數(shù)據(jù)加載失??！');
  }
})

以上這篇巧用ajax請(qǐng)求服務(wù)器加載數(shù)據(jù)列表時(shí)提示loading的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

使用Ajax進(jìn)行文件與其他參數(shù)的上傳功能(java開(kāi)發(fā))
這篇文章主要介紹了使用Ajax進(jìn)行文件與其他參數(shù)的上傳功能(java開(kāi)發(fā)),非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2017-01-01
js ajax加載時(shí)的進(jìn)度條代碼
在web頁(yè)面中使用ajax加載進(jìn)度條，可以讓用戶預(yù)先判斷等待的時(shí)間，而且還可以減少用戶等待信息加載過(guò)程中的心理焦慮感，所以進(jìn)度條加載必不可少，下面小編給大家介紹ajax加載進(jìn)度條代碼是如何實(shí)現(xiàn)的
2015-10-10
AjaxSubmit()提交file文件
這篇文章主要介紹了AjaxSubmit()提交file文件的實(shí)例講解,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-02-02
Ajax請(qǐng)求中的異步與同步，需要注意的地方說(shuō)明
默認(rèn)設(shè)置下，所有請(qǐng)求均為異步請(qǐng)求。如果需要發(fā)送同步請(qǐng)求，請(qǐng)將此選項(xiàng)設(shè)置為 false。注意，同步請(qǐng)求將鎖住瀏覽器，用戶其它操作必須等待請(qǐng)求完成才可以執(zhí)行
2012-04-04
Fly攔截全局Ajax請(qǐng)求的方法
這篇文章主要介紹了Fly攔截全局Ajax請(qǐng)求的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
讓ajax更加友好的實(shí)現(xiàn)方法(實(shí)時(shí)顯示后臺(tái)處理進(jìn)度。)
我們能否讓ajax更加友好點(diǎn)，實(shí)時(shí)顯示服務(wù)器處理的進(jìn)度了？這在一些長(zhǎng)時(shí)間的請(qǐng)求中尤其重要，比如上傳文件、發(fā)送郵件、批量處理數(shù)據(jù)。
2010-06-06
laypage前端分頁(yè)插件實(shí)現(xiàn)ajax異步分頁(yè)
layPage是一款多功能的js分頁(yè)組件，即適用于異步分頁(yè)，又可用于傳統(tǒng)的整頁(yè)刷新跳頁(yè)，還支持信息流加載，并且可無(wú)縫遷移至Node.js平臺(tái)，這篇文章主要介紹了laypage前端分頁(yè)插件，實(shí)現(xiàn)ajax異步分頁(yè),需要的朋友可以參考下
2016-05-05
用AJAX技術(shù)聚合RSS
用AJAX技術(shù)聚合RSS...
2007-02-02
Ajax的使用四大步驟
ajax(異步j(luò)avascript xml) 能夠刷新局部網(wǎng)頁(yè)數(shù)據(jù)而不是重新加載整個(gè)網(wǎng)頁(yè)。接下來(lái)通過(guò)本文給大家介紹Ajax的使用四大步驟，非常不錯(cuò)，感興趣的朋友看下吧
2016-07-07
jQuery實(shí)現(xiàn)AJAX定時(shí)刷新局部頁(yè)面實(shí)例
本篇文章通過(guò)兩種方法實(shí)例講解ajax定時(shí)刷新局部頁(yè)面，當(dāng)然方法有很多種，也可以不使用ajax來(lái)刷新頁(yè)面，可以使用jquery中的append來(lái)給指定內(nèi)容加?xùn)|西，但是都不太實(shí)用，最實(shí)用的方法還是ajax加載數(shù)據(jù)了。
2015-09-09