[转载]json的使用 前后台统一以对象的方式编程
json的使用 前后台统一以对象的方式编程
前台插件的介绍
jquery.json 插件{jQuery插件}
主要方法:
$.toJSON(json对象): 将json对象转化为字符串
$.evalJSON(str): 将字符串转化为json对象
插件下载: jquery.json-2.3.min.js
后台工具的介绍
json.net
主要方法:
将对象转为json字符串:
1
2 |
User u = new User() { Id = 1000, Name = "小白" , Age = 50 }; string returnStr=JsonConvert.SerializeObject(u); |
将json格式字符串转为对象:
1 |
User user = JsonConvert.DeserializeObject<User>(Request[ "data" ]); |
前台json的读取
方式jQuery:
jQuery.getJSON(url, [data], [callback]) 返回值:XMLHttpRequest
参数
urlString
发送请求地址。
data (可选)Map
待发送 Key/value 参数。
callback (可选)Function
载入成功时回调函数。
示例:
1. 两个参数
1234567jQuery.getJSON(
"Json.aspx"
,
function
(json) {
_json = json;
$(
"#TextArea1"
).val(json);
$(
"#Text1"
).val(json.Id);
$(
"#Text2"
).val(json.Name);
$(
"#Text3"
).val(json.Age);
})
2. 3个参数
12345jQuery.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
用户类:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26 |
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字符串:
1
2 |
User u = new User() { Id = 1000, Name = "小白" , Age = 50 }; string returnStr=JsonConvert.SerializeObject(u); |
将json格式字符串转为对象:
1 |
User user = JsonConvert.DeserializeObject<User>(Request[ "data" ]); |
整项目简单示例:
1. 主页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43 |
< 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
1
2
3
4
5 |
protected void Page_Load(object sender, EventArgs e) { User u = new User() { Id = 1000, Name = "小白", Age = 50 }; returnStr=JsonConvert.SerializeObject(u); } |
3. SetJson.aspx
1
2
3
4
5 |
protected void Page_Load( object sender, EventArgs e) { User user = JsonConvert.DeserializeObject<User>(Request[ "data" ]); returnStr = JsonConvert.SerializeObject(user); } |
项目源码下载: Json.zip
虽功未成,亦未敢藏私,众侠诸神通尽录于此,竟成一笈,名葵花宝典,以飨后世。
邮箱:steven9801@163.com
QQ: 48039387
邮箱:steven9801@163.com
QQ: 48039387