首先,我們通過(guò)ajax請(qǐng)求,向后臺(tái)傳遞參數(shù),然后后臺(tái)經(jīng)過(guò)一系列的運(yùn)算之后向前臺(tái)返還數(shù)據(jù),我希望在等待數(shù)據(jù)成功返還之前可以展示一個(gè)loading.gif圖
不廢話,在頁(yè)面上執(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="/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(); } }); }
后臺(tái)頁(yè)面就不寫(xiě)了,url中配置了傳遞到后臺(tái)的路徑,最主要的就是
beforeSend: function () { jqSender.hide().after('img id="load" src="/images/load.gif" />'); },
這要考慮到ajax異步請(qǐng)求的特點(diǎn),當(dāng)ajax執(zhí)行到url的時(shí)候,會(huì)有一個(gè)線程跳轉(zhuǎn)到后臺(tái)去執(zhí)行,
瀏覽器會(huì)增加一個(gè)線程(不知道這么說(shuō)標(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里面的圖片移除,寫(xiě)在complete: function ()語(yǔ)句中。
我后臺(tái)的處理流程大概是這樣的:首先一個(gè)http GET請(qǐng)求,獲取微信公眾平臺(tái)的access_token,然后再用http POST請(qǐng)求,獲取換取微信二維碼的ticket
然后再用WebClient方法,把請(qǐng)求到的二維碼下載到本地存儲(chǔ),然后就是數(shù)據(jù)庫(kù)的增刪查改,展示二維碼到網(wǎng)頁(yè)上。
這么一大段才讓loading有足夠的時(shí)間展示出來(lái),如果時(shí)間比較短,可以網(wǎng)上查查看有沒(méi)有定義一個(gè)時(shí)間,讓loading能夠完整的顯示,免得很突兀。
總結(jié)
以上所述是小編給大家介紹的Ajax返回?cái)?shù)據(jù)之前的loading等待效果,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
標(biāo)簽:遼寧 銅川 四川 內(nèi)江 益陽(yáng) 玉樹(shù) 營(yíng)口 本溪
巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《Ajax返回?cái)?shù)據(jù)之前的loading等待效果》,本文關(guān)鍵詞 Ajax,返回,數(shù)據(jù),之前,的,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。