了解一下ajax下json传入后台数据

最近研究了一下ajax,查了一下,向后台传入数据,或者从后台拿到数据,json语句是比较轻量级的,所以随之也就学了一下json语句:

首先采用jquery内部封装好的方法是比较简单的,我们只需做的就是修改里面的一些配置:

以下代码是对$.ajax()的解析:

 1 $.ajax({
 2                 type: "POST",     //提交方式
 3                 contentType: "application/json; charset=utf-8",   //内容类型
 4                 dataType: "json",     //类型
 5                 url: "前台地址/后台方法",    //提交的页面,方法名
 6                 data: "parameter",    //参数,如果没有,可以为null
 7                 success: function (data) { //如果执行成功,那么执行此方法
 8                     alert(data.d);        //用data.d来获取后台传过来的json语句,或者是单纯的语句
 9                 },
10                 error: function (err) { //如果执行不成功,那么执行此方法
11                     alert("err:" + err);
12                 }
13             });

当然我初次学习的时候,看到这些也是有些茫然的,因为不知道到如何才能将其用到自己的程序里面,所以就写了一个小的检测网页来测试一下,如果你测试的时候没有达到你想要的结果,那么希望你回头看一下,前台是否写的有问题,或者是参考一下下文中的注意事项吧。

前台代码 :

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="number3.aspx.cs" Inherits="ajax1.number3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>测试ajax</title>
    <script src="js/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        function  testAjax() {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                url: "number3.aspx/GetJson",//传入后台的地址/方法
                data: "{'RID':'123'}",//参数,这里是一个json语句
                success: function (data) {
                    var result = data.d;
                    alert(result);
                },
                error: function (err) {
                    alert("err:" + err);
                }
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <button onclick="testAjax();">用button测试ajax</button>
        <input type="button" value="testAjax" onclick="testAjax();" />
    </div>
    </form>
</body>
</html>

后台代码:

 1 using System;
 2 using System.Web.Services;
 3 namespace ajax1
 4 {
 5     public partial class number3 : System.Web.UI.Page
 6     {
 7         protected void Page_Load(object sender, EventArgs e)
 8         {
 9 
10         }
11         [WebMethod]
12         public static string GetJson(string RID)
13         {
14             return "{'ID':'" + RID + "'}";
15         }
16     }
17 }

后台代码中以黄色为背景的就是我们要注意的地方:

 1.using System.Web.Services;对应下面的[WebMethod]这个一定要加上的。

2.后台写的方法一定是公共静态的即一定是public static开头的。

3.参数一定是前台的data所传参数的

前台中要注意的地方:

1.大家应该会注意到,前台我用的是两个button来测试,但是第一个<button>是不行的,页面会刷新一下,其实这都是<form id="form1" runat="server">这行代码的问题,<button>标签会提交本页面的内容,从而导致异步刷新失败。所以建议大家不要用<button>标签。但是如果不得不用的话,解决办法还是有的,目前我知道的只有两个:

  ①:将<form id="form1" runat="server">代码去掉,当然如果本页面有要提交的内容就会很麻烦了

  ②:将<button onclick="aaa();return false;">用button测试ajax</button>代码改为:<button onclick="aaa();return false;">用button测试ajax</button>

2。前台的测试结果是:

那么我们如何来只获取json后面的值,而不是整个json语句呢,我们可以将json语句对象化,然后根据键来取得对应的值:前台的testAjax()的方法改为:

 function  testAjax() {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                url: "number3.aspx/GetJson",
                data: "{'RID':'123'}",
                success: function (data) {
                var result = eval("(" + data.d + ")");//这句话是将json语句对象化
                alert(result.ID);
                },
                error: function (err) {
                    alert("err:" + err);
                }
            });
        }

 

此时结果为:

以上就是初步学习json当时遇到的问题所留下的经验。同时我想验证一下是否能够在后台重载方法来实现根据前台的data是否有参数来判断要执行的方法,所以我将代码改动了一下:

改动后的前台代码
 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="number3.aspx.cs" Inherits="ajax1.number3" %>
 2 
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 
 5 <html xmlns="http://www.w3.org/1999/xhtml">
 6 <head runat="server">
 7     <title>测试ajax</title>
 8     <script src="js/jquery-1.4.1.js" type="text/javascript"></script>
 9     <script type="text/javascript" language="javascript">
10         function  testAjax() {
11             $.ajax({
12                 type: "POST",
13                 contentType: "application/json; charset=utf-8",
14                 dataType: "json",
15                 url: "number3.aspx/GetJson",
16                 data: "{'RID':'123'}",
17                 success: function (data) {
18                 var result = eval("(" + data.d + ")");
19                 alert(result.ID);
20                 },
21                 error: function (err) {
22                     alert("err:" + err);
23                 }
24             });
25         }
26         function aaa() {
27             $.ajax({
28                 type: "POST",
29                 contentType: "application/json; charset=utf-8",
30                 dataType: "json",
31                 url: "number3.aspx/GetJson",
32                 success: function (data) {
33                     alert(data.d);
34                 },
35                 error: function (err) {
36                     alert("err:" + err);
37                 }
38             });
39         }
40     </script>
41 </head>
42 <body>
43     <form id="form1" runat="server">
44     <div>
45         <button onclick="testAjax();return false;">用button测试ajax</button>
46         <input type="button" value="testAjax" onclick="testAjax();" />
47         <input type="button" value="aaa" onclick="aaa();" />
48     </div>
49     </form>
50 </body>
51 </html>

 

改动后的后台代码
 1 using System;
 2 using System.Web.Services;
 3 namespace ajax1
 4 {
 5     public partial class number3 : System.Web.UI.Page
 6     {
 7         protected void Page_Load(object sender, EventArgs e)
 8         {
 9 
10         }
11         [WebMethod]
12         public static string GetJson()
13         {
14             return "hello ajax";
15         }
16         [WebMethod]
17         public static string GetJson(string RID)
18         {
19             return "{'ID':'" + RID + "'}";
20         }
21     }
22 }

 

所得的效果为:

第一个和第二个按钮点击后效果为:

第三个按钮点击后效果为:

所以我的初步结论为:后台的重构函数是不成功的,如果有的重构参数的话,只会执行带参数的,而不会执行那个不带参数的。现在还不是太明白为什么会这样,所以希望明白原理的分享一下自己的观点。当然这只是个人观点,如若有误,望请指正。
posted @ 2013-03-03 10:50  拓荒er  阅读(6763)  评论(0编辑  收藏  举报