Ajax如何實(shí)現(xiàn)返回?cái)?shù)據(jù)之前的loading等待效果

小編給大家分享一下Ajax如何實(shí)現(xiàn)返回?cái)?shù)據(jù)之前的loading等待效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)擁有10多年成都網(wǎng)站建設(shè)工作經(jīng)驗(yàn),為各大企業(yè)提供成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站服務(wù)，對(duì)于網(wǎng)頁(yè)設(shè)計(jì)、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、app開(kāi)發(fā)定制、wap網(wǎng)站建設(shè)（手機(jī)版網(wǎng)站建設(shè)）、程序開(kāi)發(fā)、網(wǎng)站優(yōu)化（SEO優(yōu)化）、微網(wǎng)站、空間域名等，憑借多年來(lái)在互聯(lián)網(wǎng)的打拼，我們?cè)诨ヂ?lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了很多網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營(yíng)銷經(jīng)驗(yàn)，集策劃、開(kāi)發(fā)、設(shè)計(jì)、營(yíng)銷、管理等網(wǎng)站化運(yùn)作于一體，具備承接各種規(guī)模類型的網(wǎng)站建設(shè)項(xiàng)目的能力。

首先，我們通過(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能夠完整的顯示，免得很突兀。

以上是“Ajax如何實(shí)現(xiàn)返回?cái)?shù)據(jù)之前的loading等待效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞名稱：Ajax如何實(shí)現(xiàn)返回?cái)?shù)據(jù)之前的loading等待效果
文章出自：http://muchs.cn/article26/pphicg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、企業(yè)建站、網(wǎng)站建設(shè)、App開(kāi)發(fā)、網(wǎng)站改版、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)