开发者社区> double2li> 正文

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

简介: 前台插件的介绍 jquery.json 插件{jQuery插件} 主要方法: $.toJSON(json对象): 将json对象转化为字符串 $.evalJSON(str): 将字符串转化为json对象 插件下载: jquery.
+关注继续查看

前台插件的介绍

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>

image

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【Flutter】Dart 面向对象 ( 类定义 | 类的继承 | 私有变量 | 可选参数 | 默认参数 | 初始化列表 )
【Flutter】Dart 面向对象 ( 类定义 | 类的继承 | 私有变量 | 可选参数 | 默认参数 | 初始化列表 )
45 0
C#5.0-原生异步编程方式
微软提供的最新的异步编程基础设施。它允许我们以模块化的方式设计程序,来组合不同的异步操作。
27 0
使用ant design开发完整的后台系统
这里要说的是ant design的vue版和react版本的使用。这里不考虑到两种框架vue和react的底层。
57 0
【Flutter】Dart 面向对象 ( 类定义 | 类的继承 | 私有变量 | 可选参数 | 默认参数 | 初始化列表 )(二)
【Flutter】Dart 面向对象 ( 类定义 | 类的继承 | 私有变量 | 可选参数 | 默认参数 | 初始化列表 )(二)
42 0
json格式的字符串转为json对象遇到特殊字符问题解决
中午做后台发过来的json的时候转为对象,可是有几条数据一直出不来,检查发现json里包含了换行符,造成这种情况的原因可能是编辑部门在编辑的时候打的回车造成的 假设有这样一段json格式的字符串 1 var json={ 2 "school": [ 3 { 4 ...
643 0
TensorFlow新功能:TensorFlow Probability概率编程工具箱介绍
2018年,tensorflow开发者峰会上,tensorflow管理人员发布了:TensorFlow Probability——一种概率编程工具箱,用于机器学习研究人员和从业人员快速可靠地构建利用最先进硬件的复杂模型。快来学习一下吧~
3441 0
SpringBoot-13-插曲之Node文件重命名+自动生成json对象
遇到的问题:图片太多,使用起来挺麻烦 [1]有很多图片放服务器里,怎么能更好的管理,更方便拿到图片呢? [2]想用json 以一个对象数组的形式保存这些图片:以[{img:"图片名"},{img:"图片名"}....]形式 [3]虽说想法是很好,但不可能一条一条自己写吧,好歹咱也是21世纪敲代码的人。
853 0
VB编程:Timer控件中使用计数变量
VB编程:Timer控件中使用计数变量
21 0
+关注
double2li
一个在IT行业摸爬滚打的老司机
2870
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载