【AJAX】前台与后台的数据传递

【前言】

        前面有博客提到过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("未知错误");
                }
            });
        }
    });

      后台

/// 

        /// 处理抢夺的卡牌
        /// 
        [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：这也许是猴年最后一篇博客，来年见啦~