首先，我們通過ajax請(qǐng)求，向后臺(tái)傳遞參數(shù)，然后后臺(tái)經(jīng)過一系列的運(yùn)算之后向前臺(tái)返還數(shù)據(jù)，我希望在等待數(shù)據(jù)成功返還之前可以展示一個(gè)loading.gif圖

不廢話，在頁面上執(zhí)行點(diǎn)擊事件（<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="https://www.gxlcms.com/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="https://www.gxlcms.com/image/' + localkey + '" />');
 },
 complete: function () {
 $('#load').remove();
 }
 });
 }

 后臺(tái)頁面就不寫了，url中配置了傳遞到后臺(tái)的路徑，最主要的就是

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

這要考慮到ajax異步請(qǐng)求的特點(diǎn)，當(dāng)ajax執(zhí)行到url的時(shí)候，會(huì)有一個(gè)線程跳轉(zhuǎn)到后臺(tái)去執(zhí)行，

瀏覽器會(huì)增加一個(gè)線程（不知道這么說標(biāo)不標(biāo)準(zhǔn)）繼續(xù)執(zhí)行后面的程序，到success: function (data)暫停等待 后臺(tái)成功的返回?cái)?shù)據(jù)

這樣，before里面插入的圖片就相當(dāng)于是一個(gè)loading，當(dāng)數(shù)據(jù)成功返回后，把before里面的圖片移除，寫在complete: function ()語句中。

我后臺(tái)的處理流程大概是這樣的：首先一個(gè)http GET請(qǐng)求，獲取微信公眾平臺(tái)的access_token，然后再用http POST請(qǐng)求，獲取換取微信二維碼的ticket

然后再用WebClient方法，把請(qǐng)求到的二維碼下載到本地存儲(chǔ)，然后就是數(shù)據(jù)庫的增刪查改，展示二維碼到網(wǎng)頁上。

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

總結(jié)

以上所述是小編給大家介紹的Ajax返回?cái)?shù)據(jù)之前的loading等待效果，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com