Ajax如何實現(xiàn)返回數據之前的loading等待效果-創(chuàng)新互聯(lián)

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

我們提供的服務有：做網站、成都網站制作、微信公眾號開發(fā)、網站優(yōu)化、網站認證、績溪ssl等。為1000多家企事業(yè)單位解決了網站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的績溪網站制作公司

首先，我們通過ajax請求，向后臺傳遞參數，然后后臺經過一系列的運算之后向前臺返還數據，我希望在等待數據成功返還之前可以展示一個loading.gif圖

在頁面上執(zhí)行點擊事件（<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執(zhí)行到url的時候，會有一個線程跳轉到后臺去執(zhí)行，

瀏覽器會增加一個線程（不知道這么說標不標準）繼續(xù)執(zhí)行后面的程序，到success: function (data)暫停等待 后臺成功的返回數據

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

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

然后再用WebClient方法，把請求到的二維碼下載到本地存儲，然后就是數據庫的增刪查改，展示二維碼到網頁上。

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

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

新聞名稱：Ajax如何實現(xiàn)返回數據之前的loading等待效果-創(chuàng)新互聯(lián)
分享URL：http://bm7419.com/article16/dichdg.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供App設計、用戶體驗、搜索引擎優(yōu)化、品牌網站建設、全網營銷推廣、動態(tài)網站

廣告

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

網站優(yōu)化排名