這次帶給大家Ajax回傳資料前怎麼做出loading的等待動畫效果，Ajax回傳資料之前做出loading等待動畫效果的注意事項有哪些，以下就是實戰案例，一起來看一下。
首先，我們透過ajax請求，向後台傳遞參數，然後後台經過一系列的運算之後向前台返還數據，我希望在等待數據成功返還之前可以展示一個loading.gif圖
不廢話，在頁面上執行點擊事件（<a sceneid="@scene.ID" href="<a href="//m.sbmmt.com/wiki/48.html" target="_blank">javascript</a>:void(0)" rel="external nofollow" <a href="//m.sbmmt.com/wiki/1449.html" target="_blank">onclick</a>="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('<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();
}
});
}後台頁面就不寫了，url中設定了傳遞到後台的路徑，最主要的就是
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能夠完整的顯示，免得很突兀。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是Ajax回傳資料前怎麼做loading的等待動畫效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
