JSON详解
JSON的全称是”JavaScript Object Notation”,意思是JavaScript对象表示法,它是一种基于文本,独立于语言的轻量级数据交换格式。XML也是一种数据交换格式,为什么没有选择XML呢?因为XML虽然可以作为跨平台的数据交换格式,但是在JS(JavaScript的简写)中处理XML非常不方便,同时XML标记比数据多,增加了交换产生的流量,而JSON没有附加的任何标记,在JS中可作为对象处理,所以我们更倾向于选择JSON来交换数据。
JSON的两种结构
JSON有两种表示结构,对象和数组。
对象结构以”{”大括号开始,以”}”大括号结束。中间部分由0或多个以”,”分隔的”key(关键字)/value(值)”对构成,关键字和值之间以”:”分隔,语法结构如代码。
{
key1:value1,
key2:value2,
...
}
其中关键字是字符串,而值可以是字符串,数值,true,false,null,对象或数组
数组结构以”[”开始,”]”结束。中间由0或多个以”,”分隔的值列表组成,语法结构如代码。
[
{
key1:value1,
key2:value2
},
{
key3:value3,
key4:value4
}
]
认识JSON字符串
之前我一直有个困惑,分不清普通字符串,json字符串和json对象的区别。经过一番研究终于给弄明白了。比如在js中。
字符串:这个很好解释,指使用“”双引号或’’单引号包括的字符。例如:var comStr = ‘this is string’;
json字符串:指的是符合json格式要求的js字符串。例如:var jsonStr = “{StudentID:’100′,Name:’tmac’,Hometown:’usa’}”;
json对象:指符合json格式要求的js对象。例如:var jsonObj = { StudentID: “100”, Name: “tmac”, Hometown: “usa” };
在JS中如何使用JSON
JSON是JS的一个子集,所以可以在JS中轻松地读,写JSON。读和写JSON都有两种方法,分别是利用”.”操作符和“[key]”的方式。
我们首先定义一个JSON对象,代码如下。
var obj = {
1: "value1",
"2": "value2",
count: 3,
person: [ //数组结构JSON对象,可以嵌套使用
{
id: 1,
name: "张三"
},
{
id: 2,
name: "李四"
},
{
id: 3,
name: "王五"
}
], object: { //对象结构JSON对象 id: 1, msg: "对象里的对象" } };
1,从JSON中读取数据
function ReadJSON() {
alert(obj.1); //会报语法错误,可以用alert(obj["1"]);说明数字最好不要做关键字
alert(obj.2); //同上
alert(obj.person[0]); //{id: 1,name: "张三"}
alert(obj.person[0].name); //张三 或者alert(obj.person[0]["name"])
alert(obj.object.msg); // 对象里的对象 或者alert(obj.object["msg"])
}
ReadJSON()
2,向JSON中写入数据
比如要往JSON中增加一条数据,代码如下:
function Add() {
//往JSON对象中增加了一条记录
obj.sex= "男" //或者obj["sex"]="男"
}
Add()
//或直接写成:
obj.sex= "男"
增加数据后的JSON对象如图:
3,修改JSON中的数据
我们现在要修改JSON中count的值,代码如下:
function Update() {
obj.count = 10; //或obj["count"]=10
}
修改后的JSON如图。
4,删除JSON中的数据
我们现在实现从JSON中删除count这条数据,代码如下:
function Delete() {
delete obj.count;
}
Delete()
//或直接写成:
delete obj.count;
删除后的JSON如图
可以看到count已经从JSON对象中被删除了。
5,遍历JSON对象
i:key
obj[i]:value
可以使用for…in…循环来遍历JSON对象中的数据,比如我们要遍历输出obj对象的值,代码如下:
for (var i in obj) {
console.log(i + ":", obj[i]);
}
——————————————————————————————————————————————————————————- json是对象: var json = { “jim”: “11”, “tom”: “12”, “lilei”: “13” }; jquery获取$.each(json , function(key, value) {
alert(key); =>jim tom lilei alert(value); =>11 12 13
}); 原生JS获取for(var i in json){ alert(i); =>jim tom lilei alert(json[i]); =>11 12 13}; ——————————————————————————————————————————————————————————- json是数组: var arr = [{“id”:”1″,”tagName”:”apple”},{“id”:”2″,”tagName”:”orange”},{“id”:”3″,”tagName”:”banana”},{“id”:”4″,”tagName”:”watermelon”},{“id”:”5″,”tagName”:”pineapple”}]; $.each(arr, function(index, obj) { alert(obj.tagName); => apple, orange, banana, watermelon, pineapple alert(obj.id); => 1, 2, 3, 4, 5 alert(index); => 0,1, 2, 3, 4 }); $.each(arr, function(index, obj) { alert(“第”+ index +”项的tagName是”+obj.tagName);
}); =>第0项的tagName是apple 第1项的tagName是orange………………
——————————————————————————————————————————————————————————- json是字符串:(解决方案:JSON字符串转换为JavaScript对象。) var json = ‘[{“id”:”1″,”tagName”:”apple”},{“id”:”2″,”tagName”:”orange”},{“id”:”3″,”tagName”:”banana”},{“id”:”4″,”tagName”:”watermelon”},{“id”:”5″,”tagName”:”pineapple”}]’;$.each($.parseJSON(json), function(idx, obj) { //用$.parseJSON(json)或者JSON.parse(json)将其转换为JavaScript对象 ($.parseJSON 相当于去掉引号 将string变为object) alert(obj.id); =>1, 2, 3, 4, 5 alert(obj.tagName); =>apple, orange, banana, watermelon, pineapple
});
json的的解析方法
json的解析方法共有两种:eval() 和 JSON.parse(),使用方法如下:
var jsonData = ‘{“data1″:”Hello”, “data2″:”world”}’;var evalJson=eval(“(“+jsonData+”)”); //Object {data1: “Hello”, data2: “world”} var jsonParseJson=JSON.parse(jsonData); //Object {data1: “Hello”, data2: “world”}
这样就把jsonData这个json格式的字符串转换成了JSON对象。
var dataObj=eval(“(“+data+”)”);//转换为json对象eval在解析字符串时,会执行该字符串中的代码(这样的后果是相当恶劣的) json转化为字符串:var a = {a:1,b:2}JSON. stringify(a) ==>”{“a”:1,”b”:2}” 字符串转json:var str = ‘{“name”:”huangxiaojian”,”age”:”23″}’JSON.parse(str) ==> {name: “huangxiaojian”, age: “23”} var student = new Object(); student.name = “Lanny”; student.age = “25”; student.location = “China”;
var json = JSON.stringify(student); student => {name: “Lanny”, age: “25”, location: “China”} objjson => “{name: “Lanny”, age: “25”, location: “China”} ” str