json学习总结（2）

JSON进阶六-自动组装

现在很流行自动组装啊，为什么前台不行那？小弟不才也来个自动组装。

示例如下：

班级： 添加学生

学号：

姓名：

性别： 男女

语文：

删除学生

学号：

姓名：

性别： 男女

语文：

删除学生

学号：

姓名：

性别： 男女

语文：

删除学生

简介：这个是反序列化的JSON绑定。

显示

学号：

姓名：

性别： 男女

语文：

删除学生

HTML:

 <div id="tab1">
<div type="row">
<div type="text" class="colTop" style="width:780px" msg="*"">
<samp>班级：</samp><input type="text" size="8" name="Name" dataType="len"/>
<samp style="float:right; margin:5px;"><a href="javascript:AddStudent();">添加学生</a></samp>
</div>
<div   class="colTop" style="width:780px;">
<div name="Student" id="Stus" style="overflow:hidden; clear:both;">
</div>
</div>
<div type="textarea" style=" clear:both; border:1px solid #ccc; width:780px; height:115px; padding:5px;" msg="*">
<samp>简介：</samp><textarea name="About" rows="5" cols="50" dataType="text"></textarea>
</div>
</div>
</div>

<div style="display:none" id="template">
<div id="template1" style="overflow:hidden; height:30px; width:100%">
<div type="text" class="colBottom" >
<samp>学号：</samp><input type="text" size="8" name="ID" />
</div>
<div type="text" class="colBottom" msg="*">
<samp>姓名：</samp><input type="text" size="8" name="Name" dataType="cn"/>
</div>
<div type="select" class="colBottom">
<samp>性别：</samp>
<select name="Sex">
<option value="1">男</option>
<option value="2">女</option>
</select>
</div>
<div type="text" class="colBottom" msg="*">
<samp>语文：</samp>
<input type="text" size="4"  dataType="money"/>
</div>
<div type="text" class="colBottom" msg="*">
<samp>数学：</samp>
<input type="text" size="4" name="Score.Math" dataType="money"/>
</div>
<div type="text" class="colBottom" msg="*">
<samp>语文：</samp>
<input type="text" size="4" name="Score.English" dataType="money"/>
</div>
<samp class="colBottomEnd">
<href="javascript:;" onclick="DelStudent(this)">删除学生</a>
</samp>
</div>
</div>

您可以看到，上述HTML中，我用红色标记出来的type为list，它代表了一个子集合。同时大家也应该看到我用绿色标记出来的地方（name="Score.Chinese"），它在JSON中表示：{Score:{Chinese:""}} 也就是说JsonSerializer不仅支持list还能够支持对象的对象，蓝色标记的Template属性是在反向绑定时使用的（表示要克隆行模板，是一个‘#’+ID）。同时您也应该看到了黄色标记的msg了把，对了这个就是验证提示信息（如果有特殊的需要，可以重写JsonSerializer.Message()），在看看深红色标记的dataType表示验证数据类型，而验证的代码使用的是Validator这个JSON，您可以按自己需求扩充，详情可以参考下面的JS示例代码。

JavaScript：

 function AddStudent() {

var template = $("#template").children("div").clone();
$("#Stus").append(template);
}
function GetJson() {
var json = JsonSerializer.TableToJson("#tab1");
if (JsonSerializer.IsAllow) {
$.ajax({
type: "POST",
url: '<%= Request.Url.AbsolutePath %>',
data: "tabs=" + json,
success: function(msg) {
alert(msg);
}
});
}
}

function DelStudent(obj) {
$(obj).parent("samp").parent("div").remove();
}
$(document).ready(
function() {

var json = JSON2.parse('<%= this.json %>');

JsonSerializer.JsonToTab("#tab1", json);

$.extend(Validator, {
len: function(data) {
var reg = new RegExp(/[0-9,a-z,A-Z]{6}/);
return reg.test(data);
},
text: function(date) {
return date && date.length < 1000;
}
});
}
);

可以看出除添加和删除动态行外，JSON的提取和绑定的代码是非常简单。

C#：

 public partial class ExampleTwo : System.Web.UI.Page
{
public string json = "[{\"Name\":\"T31611\",\"Student\":[{\"ID\":1,\"Name\":\"张三\",\"Sex\":1,\"Score\":"
+"{\"Chinese\":33,\"Math\":44,\"English\":55}},{\"ID\":2,\"Name\":\"李四\",\"Sex\":2,"
+"\"Score\":{\"Chinese\":55,\"Math\":66,\"English\":77}},{\"ID\":3,\"Name\":\"杨大\","
+"\"Sex\":1,\"Score\":{\"Chinese\":100,\"Math\":100,\"English\":100}}],\"About\":\"这"
+"个是反序列化的JSON绑定。\"}]";
protected void Page_Load(object sender, EventArgs e)
{
if (!String.IsNullOrEmpty(Request["tabs"]))
{
List<Class> cls = Request["tabs"].DeJSON<List<Class>>();
Response.Write(cls.ToJSON());
Response.End();
}
}
}
public class Class {
public string Name;
public string About;
public List<Student> Student;
}
public class Student {
public int ID;
public string Name;
public int Sex;
public Score Score;
}
public class Score {
public decimal Chinese;
public decimal Math;
public decimal English;
}
using System.Collections.Generic;
using System.Web.Script.Serialization;

public static class Json
{

public static string ToJSON(this object obj)
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
var st = serializer.Serialize(obj);
return st;
}

public static T DeJSON(this string json)
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
return serializer.Deserialize(json);
}
}

后台代码是非常简单的，而且在结构没有发生颠覆性的改变的情况下，这块代码是不需要任何改变的。

下载JsonSerializer

 

JSON进阶七——AOP

小弟最近很迷恋JSON，以至于俺媳妇也吃起JSON的醋来（开个玩笑，呵呵）。至于小弟举的例子算不算面向切面（AOP），仁者见仁，智者见智。只是小弟对JSON的一种使用小技巧。

我可能使用AJAX，然后从后台调用一段数据，该数据可能是JSON格式的。

例如:{name:"张三",sex:1}

好了我们需要做的就是把sex转换成中文，当然你可以选择在后台处理，当然我们也会选择在前台完成？

当我们把数据一个一个放进对应的位置事，我们一般会这样做。

var json = {name:"张三",sex:1 };

for(var f in  json){

     if (f ==  “sex”){

          document.getElementById(f).value = josn[f] == 1 ? "男" : "女" ;

     } else  {

          document.getElementById(f).value =  josn[f];

     }

}

如果在来一个证件类型什么的，是不是我们还要在判断一次？

在来N个，我们是不是用Switch?

不～我们选择更好的方式。

var jsonEnum =  {

     sex: function (val){

          var a = val == 1 ? "男" : "女" ;

          return  a;

     },

idType: function (val){

        var a = null ;

        switch (val){

 　　　　　　..

          }

     }

};

var jsonBean =  {
 json:NaN,
  Get: function (key){
     　　if  (jsonEnum[key]){
       　　     return jsonEnum[key](this .json[key]);
      　　}
      　　else  {
  　　　　　　return this .json[key];
      　　}

 　　}
};

var json = {name:"张三",sex:1,idType:1 };

jsonBean.json =  json;
for(var f in  json){
          alert(jsonBean.Get(f));

}

jsonBean我们姑且可以把这个东西看成类似于Spring的容器，同时把jsonEnum当成一个配置文件，以及可扩展的类？同样的我们是不是可以通过一定的方式，做数据验证，组合等等，只要我们有这样一个“容器”JSON。

转载于:https://www.cnblogs.com/aaa6818162/archive/2009/11/18/1605551.html