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

最新推荐文章于 2021-08-09 19:57:43 发布

原创最新推荐文章于 2021-08-09 19:57:43 发布 · 4.8k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#数据 #ajax #编程

❀ BS入门同时被 2 个专栏收录

17 篇文章

订阅专栏

——【Ajax】

2 篇文章

订阅专栏

这篇博客讲述了在牛津卡牌项目中如何利用AJAX进行前后台数据传递。在掠夺卡牌功能中，用户输入信息通过AJAX发送到后台进行验证，后台处理后将结果返回前台。作者分享了在实际项目中应用AJAX遇到的挑战和学习心得，强调了实践的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【前言】

前面有博客提到过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;
        }