首先，我們通過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();
            }
        });
    }
 

後臺頁面就不寫了，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等待