json的使用 前后台统一以对象的方式编程

json的使用 前后台统一以对象的方式编程

前台插件的介绍

jquery.json 插件{jQuery插件}

主要方法:

$.toJSON(json对象): 将json对象转化为字符串

$.evalJSON(str): 将字符串转化为json对象

插件下载: jquery.json-2.3.min.js

 

后台工具的介绍

json.net

主要方法:

将对象转为json字符串:

User u = new User() { Id = 1000, Name = "小白" , Age = 50 };
string returnStr=JsonConvert.SerializeObject(u);

将json格式字符串转为对象:

User user = JsonConvert.DeserializeObject<User>(Request[ "data" ]);

下载: Newtonsoft.Json.zip

 

前台json的读取

方式jQuery:

jQuery.getJSON(url, [data], [callback])    返回值:XMLHttpRequest

参数

urlString

发送请求地址。

data (可选)Map

待发送 Key/value 参数。

callback (可选)Function

载入成功时回调函数。

示例:

1. 两个参数

jQuery.getJSON( "Json.aspx" , function (json) {
    _json = json;
    $( "#TextArea1" ).val(json);
    $( "#Text1" ).val(json.Id);
    $( "#Text2" ).val(json.Name);
    $( "#Text3" ).val(json.Age);
})

2. 3个参数

 

jQuery.getJSON( "SetJson.aspx" , { data: $.toJSON(_json) }, function (json) {
    $( "#Text4" ).val(json.Id);
    $( "#Text5" ).val(json.Name);
    $( "#Text6" ).val(json.Age);
})

 

{ data: $.toJSON(_json) } : 可以是字符串, 也可以是json数据

$.toJSON: 是 jquery.json 插件提供的方法, 将json对象转换为字符串

 

 

后台json的处理:

需要用到 Json.net

用户类:

public class User
{
    private long id;

    public long Id
    {
        get { return id; }
        set { id = value; }
    }

    private string name;

    public string Name
    {
        get { return name; }
        set { name = value; }
    }

    private int age;

    public int Age
    {
        get { return age; }
        set { age = value; }
    }
}

将对象转为json字符串:

User u = new User() { Id = 1000, Name = "小白" , Age = 50 };
string returnStr=JsonConvert.SerializeObject(u);

将json格式字符串转为对象:

User user = JsonConvert.DeserializeObject<User>(Request[ "data" ]);

 

整项目简单示例:

1. 主页面

< head runat = "server" >
    < title ></ title >
    < script src = "Scripts/jquery-1.4.1.min.js" type = "text/javascript" ></ script >
    < script src = "Scripts/jquery.json-2.3.min.js" type = "text/javascript" ></ script >
    < script type = "text/javascript" >
        var _json;
        function GetServerJson()
        {
            jQuery.getJSON("Json.aspx", function (json) {
                _json = json;
                $("#Text1").val(json.Id);
                $("#Text2").val(json.Name);
                $("#Text3").val(json.Age);
            })
        }
        function SetServerUser() {
            _json.Id = $("#Text1").val();
            _json.Name = $("#Text2").val();
            _json.Age = $("#Text3").val();
            jQuery.getJSON("SetJson.aspx", { data: $.toJSON(_json) }, function (json) {
                $("#Text4").val(json.Id);
                $("#Text5").val(json.Name);
                $("#Text6").val(json.Age);
            })
        }
    </ script >
</ head >
< body >
    < form id = "form1" runat = "server" >
    < div >
        < input id = "Button1" type = "button" value = "获取Json" onclick = "GetServerJson()" />
    </ div >
    < br />
    id:< input id = "Text1" type = "text" />
    名字:< input id = "Text2" type = "text" />
    年龄:< input id = "Text3" type = "text" />
    < input id = "Button2" type = "button" value = "修改" onclick = "SetServerUser()" />
    </ form >
    < div >修改之后的值: < br />
    id:< input id = "Text4" type = "text" />
    名字:< input id = "Text5" type = "text" />
    年龄:< input id = "Text6" type = "text" /></ div >
</ body >

点击"获取Json” 从Json.aspx 获取User对象

点击”修改”将第一行修改后的对象 传到SetJson.aspx中, 然后恢复对象接着返回恢复的对象 在页面第二行数据中显示

2. Json.aspx

protected void Page_Load(object sender, EventArgs e)
{
    User u = new User() { Id = 1000, Name = "小白", Age = 50 };
    returnStr=JsonConvert.SerializeObject(u);
}

3. SetJson.aspx

protected void Page_Load( object sender, EventArgs e)
{
    User user = JsonConvert.DeserializeObject<User>(Request[ "data" ]);
    returnStr = JsonConvert.SerializeObject(user);
}

项目源码下载: Json.zip