【前言】

前面有部落格提到過AJAX，不過對於AJAX真正的實踐還太少太少，花架子都是虛的，敲起程式碼來我就露餡了。

鑫超哥為English learning 獻身，詞典學習成為上次頭腦風暴後的高頻詞彙，鑫超哥醞釀已久的“牛津卡牌”要有動靜了，這些天有幸一起做“牛津卡牌”的小專案。感謝鑫超哥不嫌棄我沉，帶我飛~~

這篇部落格分享有關使用AJAX實現前臺與後臺的資料傳遞的知識，希望可以給讀者帶來收穫。

【掠奪功能】

牛津卡牌裡有一個小模組是掠奪，掠奪卡牌需要先在主介面文字框，輸入你想要掠奪卡牌物件的姓名。進入掠奪頁面後，10秒倒計時內，在文字框輸入此張卡牌對應的英文單詞或片語，鍵盤迴車，如果拼寫正確有一個綠色對勾出現，且卡牌易主歸你，雙方卡牌數量發生變化；如果拼寫錯誤，就有一個紅叉告訴你拼寫錯了，雙方卡牌數量不發生變化。

一張不相關的圖片~~

【AJAX實現】

鑫超哥給了鍛鍊的機會，我就上各種雲課堂找程式碼例子，找來找去AJAX格式大概懂了，但是放到實際專案裡還是有點二丈的和尚——摸不著頭腦。這時候，其它小夥伴的幫助又推了我們一把，感謝剛鵬的幫助~~

我要用AJAX實現：

        1.輸入回車時，獲得使用者輸入和頁面卡牌圖片相關資訊，傳入後臺。但是，怎麼傳入後臺，具體的程式碼一開始是不會寫的。。

        2.後臺方法遠行B層、D層獲取值以後，再次傳到前臺來進行顯示是否掠奪成功。但是，怎麼得到結果“拼寫錯誤”或“成功掠奪”，怎麼表示，具體實現一開始也是未知。

↓主要程式碼：

前臺

    //輸入回車時，獲得使用者輸入和頁面圖片相關資訊傳入後臺處理—王璐—2017-1-22 15:14:10
    $(document).keypress(function (event) {
        var keycode = (event.keyCode ? event.keyCode : event.which);
        if (keycode == '13') {
            var ContentData = "{'picid':'" + $('#picid2').text() +
                    "','picture_name':'" + $('#picture_name2').text() +
                    "','inputword':'" + $('#inputword').val() +
                    "','username1':'" + $('#username1').text() +
                    "','username2':'" + $('#username2').text() + "'}";

            $.ajax({
                url: "plunder.aspx/Plunder",
                data: ContentData,
                type: 'Post',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    if (result.d == "成功掠奪！！！") {//result結果是 成功掠奪時，介面顯示對號
                        $("#correct").css("display", "block");
                    }
                    else if (result.d == "拼寫錯誤") {//result 結果是 拼寫錯誤，介面顯示叉號
                        $("#wrong").css("display", "block");
                    }
                    else {
                        alert("更新失敗");
                    }
                    window.location.reload();
                },
                error: function (err) {
                    alert("未知錯誤");
                }
            });
        }
    });
 

      後臺

/// <summary>
        /// 處理搶奪的卡牌
        /// </summary>
        [WebMethod]
        public static string Plunder(string picid,string picture_name,string inputword,string username1,string username2) 
        {
            Entity.pictureEntity picture = new pictureEntity();
            picture.picid = int.Parse(picid);
            picture.name = picture_name;
            picture.owner = username2;
            pictureBLL bll = new pictureBLL();
            string result = bll.Plunder(picture,username1,username2,inputword);
            return result;
        }

【實踐的心得】

其實，敲起程式碼來，不只是這些“新”知識應用不佳，一些簡單的程式碼實現起來都要弄好久。程式碼一陣子不翹就生的很，所謂的心電感應什麼的就沒有了。還被鑫超哥嫌棄好多次，不過我態度端正，所以還是繼續帶著我飛~~

所以說專案中學習才是比較平衡的一個狀態，實踐出真知~~

期待我們的❀牛津卡牌❀吧~~PS：這也許是猴年最後一篇部落格，來年見啦~