[转载]json的使用前后台统一以对象的方式编程-Mikel

[转载]痕网,痕网博客,痕网工作室 – henw.

前台插件的介绍

JQuery.json 插件{JQuery插件}

主要方法:

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

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

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

后台工具的介绍

json.net

主要方法:

将对象转为json字符串:

1
User u = new User() { Id = 1000, Name = "小白", Age = 50 };

2
string returnStr=JsonConvert.SerializeObject(u);

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

1
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. 两个参数

1 jQuery.getJSON("Json.aspx", function (json) {

2 _json = json;

3 $("#TextArea1").val(json);

4 $("#Text1").val(json.Id);

5 $("#Text2").val(json.Name);

6 $("#Text3").val(json.Age);

7 })

2. 3个参数

1 jQuery.getJSON("SetJson.aspx", { data: $.toJSON(_json) }, function (json) {

2 $("#Text4").val(json.Id);

3 $("#Text5").val(json.Name);

4 $("#Text6").val(json.Age);

5 })

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

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

后台json的处理:

需要用到 Json.net

用户类:

01
public class User

02
{

03
 private long id;

04

05
 public long Id

06
 {

07
 get { return id; }

08
 set { id = value; }

09
 }

10

11
 private string name;

12

13
 public string Name

14
 {

15
 get { return name; }

16
 set { name = value; }

17
 }

18

19
 private int age;

20

21
 public int Age

22
 {

23
 get { return age; }

24
 set { age = value; }

25
 }

26
}

将对象转为json字符串:

1
User u = new User() { Id = 1000, Name = "小白", Age = 50 };

2
string returnStr=JsonConvert.SerializeObject(u);

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

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

整项目简单示例:

1. 主页面

01
<head runat="server">

02
 <title></title>

03
 <script src="Scripts/jquery-1.4.1.min.js" type="text/JavaScript"></script>

04
 <script src="Scripts/jquery.json-2.3.min.js" type="text/JavaScript"></script>

05
 <script type="text/JavaScript">

06
 var _json; 

07
 function GetServerJson()

08
 {

09
 jQuery.getJSON("Json.aspx", function (json) {

10
 _json = json;

11
 $("#Text1").val(json.Id);

12
 $("#Text2").val(json.Name);

13
 $("#Text3").val(json.Age);

14
 })

15
 }

16
 function SetServerUser() {

17
 _json.Id = $("#Text1").val();

18
 _json.Name = $("#Text2").val();

19
 _json.Age = $("#Text3").val();

20
 jQuery.getJSON("SetJson.aspx", { data: $.toJSON(_json) }, function (json) {

21
 $("#Text4").val(json.Id);

22
 $("#Text5").val(json.Name);

23
 $("#Text6").val(json.Age);

24
 })

25
 }

26
 </script>

27
</head>

28
<body>

29
 <form id="form1" runat="server">

30
 <div>

31
 <input id="Button1" type="button" value="获取Json" onclick="GetServerJson()" />

32
 </div>

33
 <br />

34
 id:<input id="Text1" type="text" />

35
 名字:<input id="Text2" type="text" />

36
 年龄:<input id="Text3" type="text" />

37
 <input id="Button2" type="button" value="修改" onclick="SetServerUser()" />

38
 </form>

39
 <div>修改之后的值: <br />

40
 id:<input id="Text4" type="text" />

41
 名字:<input id="Text5" type="text" />

42
 年龄:<input id="Text6" type="text" /></div>

43
</body>

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

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

2. Json.aspx

1
protected void Page_Load(object sender, EventArgs e)

2
{

3
 User u = new User() { Id = 1000, Name = "小白", Age = 50 };

4
 returnStr=JsonConvert.SerializeObject(u);

5
}

3. SetJson.aspx

1
protected void Page_Load(object sender, EventArgs e)

2
{

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

4
 returnStr = JsonConvert.SerializeObject(user);

5
}

项目源码下载: Json.zip

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

前台插件的介绍

后台工具的介绍

前台json的读取

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

参数

urlString

data (可选)Map

callback (可选)Function

后台json的处理:

整项目简单示例:

1. 主页面

2. Json.aspx

3. SetJson.aspx

相关推荐

热门标签

分类

链接表

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏