新手认识json

接触ajax、jquery、javascript之后，肯定要跟JSON打交道

一、JSON简介

1、什么是JSON？

• JSON：JavaScript Object Notation，是Javascript对象表示法。
• 是一种轻量级的文本数据交换方式
• JSON并不是一种技术，也不是一种语言，是一种描述数据对象的手段。

2、JSON是用来做什么？

• 交换数据信息：处理Javascript 和web服务器端的之间数据交换。
• 很多提供API接口返回的数据就是用JSON格式。

二、JSON语法

json的描述数据的语法跟JavaScript描述对象语法是相似的。

{
"student":[{"name":"Zhangsan","age":"22"},
{"name":"Lisi","age":"23"},
{"name":"Wangwu","age":"24"}]
}

（1）数据是用键值对形式，且都有双引号。
即name：value形式

{"name":"Lijian"}

（2）数据之间用”，”逗号隔开

{"name":"Lijian"},{"name":"Wangba"}

（3）数组用”[ ]”中括号
student数组包含了两个对象，每个对象代表一个学生的姓名

"student":[{"name":"Lijian"},{"name":"Wangba"}]

（4）对象用“{ }”大括号表示，对象中可以嵌套对象。
Lijian的学生的课程对象course

"student":[{"name":"Lijian",
"course":
{"courseID":"001","courseName":"Math"},
{"courseID":"002","courseName":"Chinese"}
}]

三、JSON与JavaScript

1、JSON可以使用JavaScript的语法

JSON创建一个student数组

{
"student":[{"name":"Zhangsan","age":"22"},
{"name":"Lisi","age":"23"},
{"name":"Wangwu","age":"24"}]
}

JavaScript创建一个student的数组

var student=
[{"name":"Zhangsan","age":"22"},
{"name":"Lisi","age":"23"},
{"name":"Wangwu","age":"24"}];

通过[index]的形式可以访问数组

student[0].name
Zhangsan
student[1].name
Lisi
student[2].name
Wangwu

2、JSON与JavaScript之间的转换

JSON用于服务器端交换数据，在发送发都是使用JSON的形式，而在接收端我们得需要字符串的形式处理数据。所以需要将JSON转为字符串，字符串转为JSON。
（1）JSON.parse()方法
parse()方法将数据转为JavaScript对象
服务器接收到了JSON形式的数据如下

{"name":"Jian","age":"22"}

我们需要将JSON转为JavaScript字符串

var obj = JSON.parse('{"name":"Jian","age":"22"}')

之后就可以用JavaScript正常使用了

document.getElementById("p").innerHTML=obj.name + " "+obj.age;

注意：

• JSON不能存储Date对象，只能转为字符串，然后再转为Date对象

var date={"name":"Lijian","date":"2017-12-21"};
//转为字符串
var obj = JSON.parse(date);
obj.date = new Date(obj.date);
document.getElementById("p").innerHTML = 
obj.name + ":" +obj.date;

• parse方法还有个参数function，对转换结果进行存储的函数，如下：

var obj = JSON.parse(json,function(key,value){
    $("div").html(key+": "+value);
})

（2）stringify方法
stringify方法JavaScript对象转为字符串

var obj = {"name":"Lijian","age","22"};
var strObj = JSON.stringify(obj);
document.getrElementById("div").innerHTML = strObj;

stringify方法可以将JavaScript数组转换为JSON字符串。

var arr = ["Zhangsan","Lisi","Wangwu","Zhaoliu"];
var myJSON = JSON.stringify(arr);
documrnt.getElementById("div").innerHTML = myJSON;

3、JSON的使用

（1）JSON通常是从web服务器上读取JSON数据，然后使用eval()函数或者parse()函数将JSON数据作为JavaScript对象。
使用eval必须如下的形式，即加括号。

eval("("+obj+")")

为什么要加括号呢，这是因为：
JSON对象以”{ }”的形式来开始及结束的，在JavaScript中被当作语句来处理，加括号是为了将JSON对象变为JS的对象字符串，而不是语句

eval("{}");//，不加括号->返回的是undefined
eval("({})");//加了括号->返回的是object

var txt= {"name":"Lijian","age","22"};
var obj = eval("(+txt+)");
document.getElementById("name").innerHTML=obj.name;
document.getElementById("age").innerHTML=obj.age;

（2）eval与parse函数的区别
建议使用parse函数，eval函数不安全

eval：

• 可以解析格式不太规范的格式，比如其中有”\n”
• 但是不安全，比如以下形式，eval之后会直接跳转到百度页面。（无法得之第三方给的txt中包含了什么）所以不推荐使用。

 var txt= '{ "a" : 1 , "b" : window.location.href="https://www.baidu.com" };
 var obj = eval("(+txt+)");

parse：

• 不会解析复杂的格式
• 相比较较为安全，推荐使用