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

最新推荐文章于 2024-09-13 17:32:25 发布

weixin_34150224

最新推荐文章于 2024-09-13 17:32:25 发布

阅读量69

点赞数

文章标签： json javascript ViewUI

前台插件的介绍

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

view source print ?

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个参数

view source print ?

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

用户类:

 
      01public 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

 
      1protected 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

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