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>

image

点击"获取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

你可能感兴趣的:(json)