Ajax返回數(shù)據(jù)之前的loading等待效果
首先，我們通過ajax請求，向后臺傳遞參數(shù)，然后后臺經(jīng)過一系列的運算之后向前臺返還數(shù)據(jù)，我希望在等待數(shù)據(jù)成功返還之前可以展示一個loading.gif圖
不廢話，在頁面上執(zhí)行點擊事件（<a sceneid="@scene.ID" href="javascript:void(0)" rel="external nofollow" onclick="build(this)">生成</a>）
調(diào)用下面方法：
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) {
//根據(jù)id和class獲取td標(biāo)簽
$('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異步請求的特點，當(dāng)ajax執(zhí)行到url的時候，會有一個線程跳轉(zhuǎn)到后臺去執(zhí)行，
瀏覽器會增加一個線程（不知道這么說標(biāo)不標(biāo)準(zhǔn)）繼續(xù)執(zhí)行后面的程序，到success: function (data)暫停等待 后臺成功的返回數(shù)據(jù)
這樣，before里面插入的圖片就相當(dāng)于是一個loading，當(dāng)數(shù)據(jù)成功返回后，把before里面的圖片移除，寫在complete: function ()語句中。
我后臺的處理流程大概是這樣的：首先一個http GET請求，獲取微信公眾平臺的access_token，然后再用http POST請求，獲取換取微信二維碼的ticket
然后再用WebClient方法，把請求到的二維碼下載到本地存儲，然后就是數(shù)據(jù)庫的增刪查改，展示二維碼到網(wǎng)頁上。
這么一大段才讓loading有足夠的時間展示出來，如果時間比較短，可以網(wǎng)上查查看有沒有定義一個時間，讓loading能夠完整的顯示，免得很突兀。
總結(jié)
以上所述是小編給大家介紹的Ajax返回數(shù)據(jù)之前的loading等待效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Ajax實現(xiàn)省市區(qū)三級級聯(lián)(數(shù)據(jù)來自mysql數(shù)據(jù)庫)
這篇文章主要為大家詳細(xì)介紹了Ajax實現(xiàn)省市區(qū)三級級聯(lián),數(shù)據(jù)來自mysql數(shù)據(jù)庫,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
ajax+php中文亂碼解決辦法...2007-04-04
這篇文章主要為大家詳細(xì)介紹了ajax實現(xiàn)頁面的局部加載，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
這篇文章主要介紹了如何使用ajax來自動補全表單字段,需要的朋友可以參考下2014-08-08
AJAX可以使網(wǎng)頁實現(xiàn)異步更新,這意味著可以在不重新加載整個網(wǎng)頁的情況下,對網(wǎng)頁的某部分進(jìn)行更新,下面這篇文章主要給大家介紹了關(guān)于ajax原始請求的相關(guān)資料,需要的朋友可以參考下2021-12-12
這篇文章主要為大家詳細(xì)介紹了ajax實現(xiàn)數(shù)據(jù)分頁查詢的相關(guān)資料，以及ajax實現(xiàn)對數(shù)據(jù)庫的查詢，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
Ajax 的初步實現(xiàn)(使用vscode+node.js+express框架)
這篇文章給大家介紹使用vscode+node.js+express框架操作ajax的初步實現(xiàn)方法，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-06-06
使用$.get()根據(jù)選項的不同從數(shù)據(jù)庫異步請求數(shù)據(jù)
本例實現(xiàn)的是這樣的一個效果：當(dāng)從select下拉框選擇編程語言時時，根據(jù)選項的不同，異步請求不同的函數(shù)API描述,需要的朋友可以參考下2014-04-04
JSONP是一種使用JSON數(shù)據(jù)的方式，返回的不是JSON對象，是包含JSON對象的javaScript腳本。接下來通過本文給大家介紹jsonp解決ajax跨域訪問問題的思路，非常不錯具有參考借鑒價值，感興趣的朋友一起看下吧2016-05-05![一句話解決AJAX中文亂碼問題[推薦]](http://img.jbzj.com/images/xgimg/bcimg9.png)
寫了個通過一般處理程序處理的AJAX小程序 結(jié)果遇到了國內(nèi)程序員遇到的最多的問題：中文亂碼2008-10-10