AJAX 的 Ajax返回數據之前的loading等待效果（gif效果等）

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

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

 

 

function build(sender) {
  // 此處是對全局加載；如果對局部控價加載，可修改jqSender如：
  // var jqSender = $('#控件id');最后complete函數內remove之后，在將刪除的控價顯示，不然控件就不顯示了--> jqSender.show(); 完美！
  var jqSender = $(sender);
  var sceneid = jqSender.attr('sceneid');
  $.ajax({
   type: 'post',
   url: "Follow/UpdateUrl",
   data: { sceneid: sceneid },
   beforeSend: function () {
    jqSender.hide().after('<img id="load" src="/images/load.gif" />');
   },
   success: function (data) {
    //根據id和class獲取td標簽
    $('tbody tr[id=' + sceneid + '] td.wxurl-col').html(data.QRUrl);
    $('tbody tr[id=' + sceneid + '] td.localkey-col').html(data.LocalKey);
    //隱藏生成按鈕，插入圖片
    var localkey = data.LocalKey;
    jqSender.after('<img src="/image/' + localkey + '" />');
   },
   complete: function () {
    $('#load').remove();
   }
  });
 }

 

最主要的一句就是：

beforeSend: function () { jqSender.hide().after('<img id="load" src="/images/load.gif" />'); },

　　

總結：

 

這要考慮到ajax異步請求的特點，當ajax執行到url的時候，會有一個線程跳轉到后台去執行，

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

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

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

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

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

 

感謝w3school~