關於Ajax返回資料之前的loading等待效果實作方法

小云云
發布: 2023-03-18 11:14:01
原創
2732 人瀏覽過

我們都知道在我們載入一些頁面的時候。會出現等待loading頁面,我們透過ajax請求,向後台傳遞參數,然後後台經過一系列的運算之後向前台返還數據,我希望在等待數據成功返還之前可以展示一個loading.gif圖。接下來透過本文跟大家分享Ajax回傳資料之前的loading等待效果,需要的朋友可以參考下。

不廢話,在頁面上執行點擊事件(<a sceneid="@scene.ID" href="javascript:void(0)" rel="external nofollow" onclick="build (this)">產生</a>

呼叫下面方法:


function build(sender) {
  var jqSender = $(sender);
  var sceneid = jqSender.attr(&#39;sceneid&#39;);
  $.ajax({
   type: &#39;post&#39;,
   url: "Follow/UpdateUrl",
   data: { sceneid: sceneid },
   beforeSend: function () {
    jqSender.hide().after(&#39;<img id="load" src="/images/load.gif" />&#39;);
   },
   success: function (data) {
    //根据id和class获取td标签
    $(&#39;tbody tr[id=&#39; + sceneid + &#39;] td.wxurl-col&#39;).html(data.QRUrl);
    $(&#39;tbody tr[id=&#39; + sceneid + &#39;] td.localkey-col&#39;).html(data.LocalKey);
    //隐藏生成按钮,插入图片
    var localkey = data.LocalKey;
    jqSender.after(&#39;<img src="/image/&#39; + localkey + &#39;" />&#39;);
   },
   complete: function () {
    $(&#39;#load&#39;).remove();
   }
  });
 }
登入後複製

 後台頁面就不寫了,url中配置了傳遞到後台的路徑,最主要的就是


beforeSend: function () { jqSender.hide().after(&#39;<img id="load" src="/images/load.gif" />&#39;); },
登入後複製

這要考慮到ajax異步請求的特點,當ajax執行到url的時候,會有一個執行緒跳到後台去執行,

瀏覽器會增加一個執行緒(不知道這麼說標不標準)繼續執行後面的程序,到success: function (data)暫停等待後台成功的回傳資料

這樣,before裡面插入的圖片就相當於是一個loading,當資料成功回傳後,把before裡面的圖片移除,寫在complete: function ()語句中。

我後台的處理流程大概是這樣的:首先一個http GET請求,取得微信公眾平台的access_token,然後再用http POST請求,取得換取微信二維碼的ticket

然後再用WebClient方法,把請求到的二維碼下載到本地存儲,然後就是資料庫的增刪查改,展示二維碼到網頁上。

這麼一大段才讓loading有足夠的時間展示出來,如果時間比較短,可以上網查查看有沒有定義一個時間,讓loading能夠完整的顯示,免得很突兀。

相關推薦:

微信小程式loading元件如何載入動畫方法教學

如何解決多個ajax頁面請求,頁面loading阻塞問題

loading動畫有哪些?

以上是關於Ajax返回資料之前的loading等待效果實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!