如何使用ajax将json传入后台数据

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

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

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

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

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

前台代码 ：

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



    
    
    


    
    
    

后台代码：

 using System;
 using System.Web.Services;
 namespace ajax1
 {
     public partial class number3 : System.Web.UI.Page
     {
         protected void Page_Load(object sender, EventArgs e)
         {
         }
         [WebMethod]
         public static string GetJson(string RID)
         {
             return "{'ID':'" + RID + "'}";
         }
     }
 }

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

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

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

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

前台中要注意的地方：

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

　　①：将代码去掉，当然如果本页面有要提交的内容就会很麻烦了

　　②：将

用button测试ajax代码改为：用button测试ajax

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是否有参数来判断要执行的方法，所以我将代码改动了一下：

改动后的前台代码
 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="number3.aspx.cs" Inherits="ajax1.number3" %>
 
 
 
     
     
     
 
 
     
     
     
 
 
改动后的后台代码
 using System;
 using System.Web.Services;
 namespace ajax1
 {
     public partial class number3 : System.Web.UI.Page
     {
         protected void Page_Load(object sender, EventArgs e)
         {
         }
         [WebMethod]
         public static string GetJson()
         {
             return "hello ajax";
         }
         [WebMethod]
         public static string GetJson(string RID)
         {
             return "{'ID':'" + RID + "'}";
         }
     }
 }

所得的效果为：

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

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

所以我的初步结论为：后台的重构函数是不成功的，如果有的重构参数的话，只会执行带参数的，而不会执行那个不带参数的。现在还不是太明白为什么会这样，所以希望明白原理的分享一下自己的观点。当然这只是个人观点，如若有误，望请指正。