JSON 学习总结(1)
http://www.cnblogs.com/KangC/archive/2008/12/08/1349130.html
JSON进阶一-初识JSON
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScript(Standard ECMA-262 3rd Edition - December 1999)的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。这些特性使JSON成为理想的数据交换语言。
上述的JSON,是我网上找来的,而我理解的JSON是一种以键值对形式描述的数据结构,他可以等同于后台的类。
例如:我们在后台有个People类,以C#为例:
/**//// <summary>
/// 姓名
/// </summary>
public string name;
/**//// <summary>
/// 性别
/// </summary>
public byte sex;
/**//// <summary>
/// 出生日期
/// </summary>
public DateTime birth;
}
而用JSON方式描述这个People可以表现为:var People = {name:'',sex:0,birth:''};
那如何描述集合那?例如:
List<People> pList = new List<People>(); 。
JSON的表现形式为:
[{name:'张三',sex:1,birth:'2008-10-01'},{name:'李四',sex:2,birth:2009-01-01}]
如此使用JSON就能表现出各种形式的二维表结构。
每个人都需要上学,都有自己的班级例如:
/// <summary>
/// 姓名
/// </summary>
public string name;
/// <summary>
/// 性别
/// </summary>
public byte sex;
/// <summary>
/// 出生日期
/// </summary>
public DateTime birth;
/// <summary>
/// 班级
/// </summary>
public Classes classes;
}
public class Classes {
/// <summary>
/// 班级编号
/// </summary>
public int ID;
/// <summary>
/// 班级人数
/// </summary>
public int Count;
}
我们用JSON去表示这样的结构:
var classes = {ID:'',Count:''}
var People = {name:'',sex:'',birth:'',classes:classes};
以此类推,我们可以用JSON表现出更复杂的后台类结构:
即使是方法,构造函数也一样可以:
例如:
/// <summary>
/// 人类的构造函数
/// </summary>
/// <param name="cls">班级</param>
public People(Classes cls){
this.classes = cls;
}
/// <summary>
/// 姓名
/// </summary>
public string name;
/// <summary>
/// 性别
/// </summary>
public byte sex;
/// <summary>
/// 出生日期
/// </summary>
public DateTime birth;
/// <summary>
/// 班级
/// </summary>
public Classes classes;
/// <summary>
/// 吃饭方法
/// </summary>
public void Eating { }
}
public class Classes {
/// <summary>
/// 班级编号
/// </summary>
public int ID;
/// <summary>
/// 班级人数
/// </summary>
public int Count;
}
JSON的表现形式为:
var People = {
name:'',
sex:'',
birth:'',
classes:{},
Eating: function(){// 吃饭方法
alert('在'+this.classes.ID+'班和'+this.classes.Count+'个同学一起吃饭');
},
Init: function(cls){// 构造函数
this.classes = cls;
}
};
People.Init(Classes);
People.Eating();
以上的JSON例子对应后台的Class表现形式都是static的,想知道如何使用面向对象的JSON请看下回吧
我在这里使用JQuery的extend来表现JSON的面向对象形式。
例如有个JSON结构:
<script>
var People = {
name: '',
sex: 0,
birth: '',
Speak: function() {
var sexCN = this.sex == 1 ? '男' : '女';
alert('我叫:' + this.name + ',' + sexCN + '性,出生于:' + this.birth);
}
};
var p1 = $.extend({}, People, { name: '张三', sex: 1, birth: '2007-1-1' });
var p2 = $.extend({}, People, { name: '李四', sex: 2, birth: '2007-2-1' });
p1.Speak();
p2.Speak();
</script>
$.extend 方法是JQ的一个方法,可以看下JQ的API,包括:EXT在内很多JS框架都会有类似extend方法,$.extend({},People,{name:'',sex:1,birth:'2007-1-1'});类似于C#的继承,你也可以把它理解为new了个新对象。
同样的你也可以重写Speak方法。
<script>
var People = {
name: '',
sex: 0,
birth: '',
Speak: function() {
var sexCN = this.sex == 1 ? '男' : '女';
alert('我叫:' + this.name + ',' + sexCN + '性,出生于:' + this.birth);
}
};
var p1 = $.extend({}, People, { name: '张三', sex: 1, birth: '2007-1-1' });
p1.Speak();
p1 = $.extend(p1, {
Speak:function(){
alert('我姓'+this.name.substr(0,1)+'名'+this.name.substr(1,1));
}
});
p1.Speak();
</script>
但JSON的作用不值如此,在不同程序中通信也有很好的效果,继续。
例如:
var People = { name: '张三', sex: 1, birth: '2007-1-1' };
alert(Peple["name"]);
var PeopleArr = [{ name: '张三', sex: 1, birth: '2007-1-1' },{ name: '李四', sex: 2, birth: '2007-2-1' }];
调用'张三'
alert(PeopleArr[0].name);
alert(PeopleArr[0]["name"]); 同上。
二者之间没有任何区别,但后者更为灵活,我可以动态的调用JSON中的容易对象。
如何获得JSON的Key:
for (var key in PeopleArr[0]){
alert(key);
}
这样我们可以获得:name,sex,birth;
同样的我们可以遍历出JSON中的所有对象:
for (var key in PeopleArr[0]){
alert(PeopleArr[0][key]);
}
经常会有人问我这样获得JSON的主键有什么用,用处大的去了,例如:JQuery中的getJSON()方法,其中传递到后台的使用的是Json格式,其实它并不是真的以JSON格式传递到后台,而是通过上述形式拼接成一串参数传递到后台。
例如:
var arr = new Array();
for (var key in PeopleArr[0]){
arr.push(key+'='+PeopleArr[0][key]);
}
alert(arr.join('&'));
是不是比你一个个傻傻的拼接上去方便多了?
调用JSON方法:
var People = {
name: '',
sex: 0,
birth: '',
Speak: function() {
var sexCN = this.sex == 1 ? '男' : '女';
alert('我叫:' + this.name + ',' + sexCN + '性,出生于:' + this.birth);
}
};
People.Speak(); 必须加上括号。
People["Speak"](); 同上。
例如:以前我们做注册界面,我们需要写很多东西,在前端,我们要使用各种文本输入框,有些还要使用select,checkbox等,提供用户填写各种信息,无论在JSP中还是在APS.NET中,我们都要把前台文本框和后台赋值做一一对应。几个还好,十几个也能应付,几十个就感觉无聊了,我最不喜欢的就是做这类的东西。一旦要添加一个东西,就要修改HTML和后台代码,用表单提交的方式还好,用AJAX方式就麻烦了,不但要修改后台代码,还要修改JS,耦合度非常高,下面的例子就是小弟最近的一些编程心得,使用JSON来解决这个问题。
在此我用到了包括Jquery-1.2.6在内的四个js文件:(如果你对JQ不是很了解的话,可以看些园子里其他园友写的文章)
分别介绍下其他三个:
Json2.js 是一个老外写的把Json和字符串互相转换的JS(好像是EXT里的东西,不过我是在一个老外BLOG里找到的)。我对其做了一些扩展,这个以后再说吧。
Json2.parse(); // 把Json形式的字符串转换成Json对象(包括JSON数组形式)。
Json2.stringify(); //把Json对象转换成Json形式的字符串(包括JSON数组形式)。
Validator.js 是一个数据验证的js文件,我在日常工作中很多地方用到它,是我自己写的一个简单的验证,有兴趣的同学可以对他扩展。我在里面提供了,日期,数组,中文等验证方式。
TableSerializer.js 这个JS是的把表格里的元素转换成JSON,也能把JSON转换到表格中,这个JS还不够完善,有兴趣的同学可以扩展一下,或者把你的需求告诉我,我不断的完善它。
TableSerializer.TableToJson(); // 把表格里的填写项转换成Json数组
TableSerializer.JsonToTable(); // 把json数组转换成表格中的元素。
下例: (有兴趣的话你可以填写点信息操作下)
|
PSTS |
|
|
|
PSTS |
|
|
|
PSTS |
|
|
|
PSTS |
|
|
对应TableSerializer,必须符合的HTML结构:
<tr>
<td type="text">
<div type="text">
<input type="text" msg="*" key="Guid" dataType="ints"/>
</div>
</td>
<td type="checkbox">
<div type="checkbox">
PSTS <input type="checkbox" key="PSTS" dataType="int"/>
</div>
</td>
<td>
<div type="select">
<select msg="*" key="GJ" dataType="string">
<option value="">全部</option>
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="日本">日本</option>
</select>
</div>
</td>
<td>
<div type="text">
<input type="text" msg="*" key="dt" dataType="date"/>
</div>
</td>
</tr>
</table>
可以看到,我在每个获得值的操作项外都嵌套类一个DIV,这类DIV都会有一个特殊属性type,这个type表示操作项HTML的类型。
在操作项中,会有一个key的属性,这个属性的值就表示Json的主键值,而dataType表示数据类型,msg表示如果数据输入类型没通过验证时所提示的错误信息。
Js代码:
var tab;
$(document).ready(
function() {
//构造一个新的TableSerializer的JSON对象,并对指定需要转换成JSON数组形式,ID为’tab'的表格
tab = $.extend({}, TableSerializer, { IDs: '#tab' });
}
);
function a(){
// 获得ID为tab的表格中,指定格式内容的,JSON数组形式的字符串。
var str = tab.TableToJson();
// 判断是否通过数据类型验证。
if (tab.IsAllow){
// 把JSON一一对应赋予id为fa的表格中HTML项里。
TableSerializer.JsonToTab("#fa", JSON2.parse(str));
}
}
</script>
到此为止,我们还是没有看到JSON和后台的交互。
其实很简单,我们只要把TableToJson()方法中获得的JSON数组形式的字符串发送的后台,就可以了。
这里我用到了C#的一个开源项目Newtonsoft.Json:
后台写法如下:
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// 在这里我使用的是AJAX形式,后台获得一串前台传递的JSON数组形式的字符串
if (!string.IsNullOrEmpty(Request["key"])) {
// 反序列化
List<ss> sss = (List<ss>)JavaScriptConvert.DeserializeObject(Request["key"], typeof(List<ss>));
// 在序列化发送到前台。
Response.Write(sss.ToJSON());
Response.End();
}
}
}
// 对应前台输入内容的实体。
public class ss {
public int Guid;
public bool PSTS = true;
public string GJ = string.Empty;
public DateTime dt;
}
// 把实体系列化成JSON形式字符串
public static class JsonHelper
{
public static string ToJSON(this object obj)
{
StringWriter sw = new StringWriter(System.Globalization.CultureInfo.InvariantCulture);
Newtonsoft.Json.JsonSerializer json = new Newtonsoft.Json.JsonSerializer();
json.NullValueHandling = Newtonsoft.Json.NullValueHandling.Ignore;
json.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore;
using (Newtonsoft.Json.JsonWriter jw = new Newtonsoft.Json.JsonTextWriter(sw))
{
json.Serialize(jw, obj);
}
return sw.ToString();
}
}
}
不难看出,无论需求如何改变,我们只需要改变后台的实体,以及前台HTML,而无需对前台的JS和后台代码做任何改动。
在园子里看到很多关于AJAX FOR WCF的文章,大多数采用EXT和WCF交互。
但老实说EXT这个东西比较适合应用开发,对于我这种的网站程序员,EXT比较大。
其中涉及到许多知识点,在这里和大家分享下。
至于如何使用AJAX FOR WCF我这里就不说了,园子里有很多类似的文章:
首先,我说一下如何写一个JSON传递形式调用AJAX FOR WCF服务(我这里使用JQuery的ajax为例):
type: 'post',
url: '/TdxGridExample/Wcf/Service.svc/Add', //WCF的URL,/Add是指定该WCF的Add方法
contentType: 'text/json',
data: ’{"x":1,"y":2}‘,
success: function(msg) {
alert(msg);
}
});
注:contentType:类型必须设置为text/json,而不是'text/xml' 或 'text/html'
data,必须是json形式字符串:并且要对应后台WCF参数名:
WCF代码:
[WebInvoke(RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, UriTemplate = "/Add", BodyStyle = WebMessageBodyStyle.WrappedRequest)]
public int Add(int x, int y) {
return x + y;
}
{"x":1,"y":2} 中的x对应Add方法中的第一个参数,而y则对应第二个参数:
例2,关于WCF对象类型参数:
js代码:
var pople = { p: { name: '张三', sex: 1, birth: JSON2.strToDate('2000-11-11','yyyy-MM-dd')} };
$.ajax({
type: 'post',
url: '/TdxGridExample/Wcf/Service.svc/Speak',
contentType: 'text/json',
data: JSON2.stringify(pople),
success: function(msg) {
alert(msg);
}
});
}
注: wcf的日期类型必须是UTC日期形式的字符串类型, 我在JSON2.js 里扩展了
JSON2.dateFormat('UTC日期格式的字符串,例如:/Date(1304179200000+0800)/','日期格式,例如:yyyy-MM-dd');
JSON2.strToDate('2009-11-11','yyyy-MM-dd');
互相转换的方法。
{ p: { name: '张三', sex: 1, birth: JSON2.strToDate('2000-11-11','yyyy-MM-dd')} }
p 代表下例WCF的Speak方法中参数,
而name,sex,birth 对应People类中的属性,大小写必须相符。
wcf代码:
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service
{
[OperationContract]
[WebInvoke(RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, UriTemplate = "/Add", BodyStyle = WebMessageBodyStyle.WrappedRequest)]
public int Add(int x, int y)
{
return x + y;
}
[OperationContract]
[WebInvoke(RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, UriTemplate = "/Speak", BodyStyle = WebMessageBodyStyle.WrappedRequest)]
public string Speak(People p)
{
string sexCN = p.sex == 1 ? "男" : "女";
return "我叫" + p.name + "," + sexCN + "性,出生于" + p.birth.ToString("yyyy-MM-dd");
}
}
[DataContract]
public class People {
[DataMember]
public string name;
[DataMember]
public byte sex;
[DataMember]
public DateTime birth;
}
注:People必须添加序列化标记
示例代码