首先，我們通過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('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能夠完整的顯示，免得很突兀。
總結
以上所述是小編給大家介紹的Ajax返回數據之前的loading等待效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
您可能感興趣的文章:- 巧用ajax請求服務器加載數據列表時提示loading的方法
- vue實現ajax滾動下拉加載，同時具有loading效果(推薦)
- Ajax全局加載框(Loading效果)的配置
- JS基于Ajax實現的網頁Loading效果代碼
- Ajax風格的一款網頁Loading效果
- dwz 如何去掉ajaxloading具體代碼
- Ajax loading gif generator
