標籤:線程 調用 let .ajax data gif loading 產生 語句
首先,我們通過ajax請求,向後台傳遞參數,然後後台經過一系列的運算之後向前台返還資料,我希望在等待資料成功返還之前可以展示一個loading.gif圖
不廢話,在頁面上執行點擊事件(<a sceneid="@scene.ID" href="javascript:void(0)" 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(); } }); }
ajax
後台頁面就不寫了,url中配置了傳遞到背景路徑,最主要的就是
beforeSend: function () { jqSender.hide().after(‘<img id="load" src="/images/load.gif" />‘); },
這要考慮到ajax非同步請求的特點,當ajax執行到url的時候,會有一個線程跳轉到後台去執行,
瀏覽器會增加一個線程(不知道這麼說標不標準)繼續執行後面的程式,到success: function (data)暫停等待 後台成功的返回資料
這樣,before裡面插入的圖片就相當於是一個loading,當資料成功返回後,把before裡面的圖片移除,寫在complete: function ()語句中。
我背景處理流程大概是這樣的:首先一個http GET請求,擷取公眾平台的access_token,然後再用http POST請求,擷取換取二維碼的ticket
然後再用WebClient方法,把請求到的二維碼下載到本機存放區,然後就是資料庫的增刪查改,展示二維碼到網頁上。
這麼一大段才讓loading有足夠的時間展示出來,如果時間比較短,可以網上查查看有沒有定義一個時間,讓loading能夠完整的顯示,免得很突兀。
註:此篇隨筆只供參考使用,而且也有很多小瑕疵,最主要的不是代碼,邏輯才是最重要的。
ajax返回資料之前的loading等待