Ajax傳回資料之前的loading等待效果（圖文教學）

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

首先，我們透過ajax請求，向後台傳遞參數，然後後台經過一系列的運算之後向前台返還數據，我希望在等待數據成功返還之前可以展示一個loading.gif圖

不廢話，在頁面上執行點擊事件（<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('sceneid');
  $.ajax({
   type: 'post',
   url: "Follow/UpdateUrl",
   data: { sceneid: sceneid },
   beforeSend: function () {
    jqSender.hide().after(&#39;<img  src="/static/imghwm/default1.png"  data-src="/images/load.gif"  class="lazy"  id="load"  / alt="Ajax傳回資料之前的loading等待效果（圖文教學）" >&#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="/static/imghwm/default1.png"  data-src="/image/&#39; + localkey + &#39;"  class="lazy"   / alt="Ajax傳回資料之前的loading等待效果（圖文教學）" >&#39;);
   },
   complete: function () {
    $(&#39;#load&#39;).remove();
   }
  });
 }

 後台頁面就不寫了，url中設定了傳遞到後台的路徑，最主要的就是

beforeSend: function () { jqSender.hide().after(&#39;<img  src="/static/imghwm/default1.png"  data-src="/images/load.gif"  class="lazy"  id="load"  / alt="Ajax傳回資料之前的loading等待效果（圖文教學）" >&#39;); },

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

瀏覽器會增加一個執行緒（我不知道這麼說標不標準）繼續執行後面的程序，到success: function (data)暫停等待後台成功的返回數據

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

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

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

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

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

jQuery裡ajax.load()方法要如何使用

## Ajax PHP進行資料互動（附程式碼）

Ajax Struts2接收陣列表單（附程式碼）

#

以上是Ajax傳回資料之前的loading等待效果（圖文教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！