一 JSON的简单概述
JSON,全称是JavaScript Object Natotion(JavaScript 对象表示法)，是存储和交换文本信息的语法。与XML类似。但JSON 比 XML 更小、更快，更易解析。是轻量级的，且具有自我描述性，更好地理解。
JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。
JSON从描述上看，是Java Script对象的表示法，所以与Java Script有非常密切的联系。JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。由于这种相似性，无需解析器，JavaScript 程序能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象。
JSON文件的后缀名是.json, MIME类型为: application/json。
MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型。是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名，以及一些媒体文件打开方式。
二 JSON与XML的区别
二.一 与 XML 相同之处
- JSON 是纯文本
- JSON 具有"自我描述性"（人类可读）
- JSON 具有层级结构（值中存在值）
- JSON 可通过 JavaScript 进行解析
- JSON 数据可使用 AJAX 进行传输
二.二 与 XML 不同之处
- 没有结束标签
- 更短
- 读写的速度更快
- 能够使用内建的 JavaScript eval() 方法进行解析
- 使用数组
- 不使用保留字
二.三 Ajax方面具体说明
对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用：
使用 XML (在数据消息交互方面，用XML过多)
- 读取 XML 文档
- 使用 XML DOM 来循环遍历文档
- 读取值并存储在变量中
使用 JSON (在数据传递方面,特别是前后台数据交互方面)
- 读取 JSON 字符串
- 用 eval() 处理 JSON 字符串
三 JSON的单值处理 （均用JSP讲解，故要创建一个Web动态工程(eclipse)）
JSON的单值处理方式很简单， 就是简单的{key:value} 形式,且只有这一个。 用{} 进行括起来。相当于key=value形式。
其中key值表示的是key,value表示的是值。 类似于Map键值对的方式。 其中value可以取值的类型有:
有字符串类型，数字类型，布尔类型(true,false),null 和对象类型，数组类型，(下面会单独讲，意思是可以互相嵌套)。
三.一 数字类型
在index.jsp页面中，创建一个简单的JSON的页面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="jquery-3.1.0.min.js"></script> <title>两个蝴蝶飞对JSON的不深入了解</title> <script> $(function(){ //写具体的操作 }) </script> </head> <body> <h2>关于JSON的学习</h2> <div id="myjson"> <span id="single"></span> <span id="name"></span> <span id="age"></span> <span id="sex"></span> </div> </body> </html>
1.单数字时:
//定义成json对象，用{} 拓起来 var obj={"age":23}; $("#age").text(obj.age);
2.也可以将23用双引号括起来，即
var obj={"age":"23"}; $("#age").text(obj.age);
但这个时候，表示的是字符串23,并不是数字23.
3.也可以将age不括起来，即
var obj={age:"23"}; $("#age").text(obj.age);
4. {"age":23} 相当于为age=23。
5. 至于修改和删除，添加等操作，用下面的对象来解释。这里暂时不解释了。
三.二 字符串类型
//定义成json对象，用{} 拓起来 var obj={"name":"两个蝴蝶飞"}; $("#name").text(obj.name);
2. 如果将后面的字符串值去掉"" ,即
var obj={"name":两个蝴蝶飞}; $("#name").text(obj.name);
这样会报错的，页面上也不会显示出值。 所以，如果value是非数字类型，那么应该用"" 括起来。
不要以为没有弹出框就不是报错，用F12打开开发者模式看一下
3. 现在取出的值是obj.name, 如果写错了，即写成obj.age, 并不存在的值，
var obj={"name":"两个蝴蝶飞"}; $("#name").text(obj.age);
页面上不会报错，但什么东西都不会显示的
三.三 布尔类型值 true,false
var obj={"sex":true}; if(obj.sex){ console.log("性别是男"); }else{ console.log("性别是女"); }
里面的true为布尔类型值，刷新页面，控制台输出:
可以取出值来直接放在if中进行判断。
2. 有的说，将true 变成"false", 是字符串类型的，为什么还打印输出呢?
//定义成json对象，用{} 拓起来 var obj={"sex":"false"}; if(obj.sex){ console.log("性别是男"); }else{ console.log("性别是女"); }
这个时候，输出的是
性别也是男，并不是女。 因为这个时候，false为字符串值。 obj.sex时，取出的是字符串类型的false。 所以仍然打印性别是男。 (js判断if条件为false的情况:
逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN，那么if判断 false ，其他为true )
字符串类型的false,与布尔类型的false,并不一样。
var obj={"sex":"false"}; console.log(typeof(obj.sex));
上面的例子也就是: (以下均不截图了)
if("false"){ console.log("性别是男"); //输出为男 }else{ console.log("性别是女"); }
3. 如果想让其判断为女，那么就需要用字符串去判断条件了。 (以下均不截图了)
//定义成json对象，用{} 拓起来 var obj={"sex":"false"}; console.log(typeof(obj.sex)); if(obj.sex!="false"){ console.log("性别是男"); }else{ console.log("性别是女"); //输出性别是女 }
三.四 值为null
//定义成json对象，用{} 拓起来 var obj={"money":null}; console.log("类型是:"+typeof(obj.money)); //object console.log(obj.money); //null, 并不是什么都不显示 if(obj.money){ console.log("有钱"); }else{ console.log("没有钱"); //null为false, 显示为没有钱 }
四 值为单个对象 {} (即Java 中JavaBean形式)
上面只有一个属性，很难表示一个对象的完整信息，也是无法表示出来的。 故可以在{} 封装多个对象。 单个值表示也是用:进行分隔，但值与值之间用,进行分隔。
//定义成json对象，用{} 拓起来 var obj={"name":"两个蝴蝶飞","age":24,"sex":"男"}; console.log("类型:"+typeof(obj)); //为object $("#name").text(obj.name); $("#age").text(obj.age); $("#sex").text(obj.sex);
在取值的时候，只要相应的.key就行了。
四.二 有人说，会见过这种模式,
var obj={"person":{"name":"两个蝴蝶飞","age":24,"sex":"男"}};
即现在后面的value值，并不是单纯的一个数字，而是一个对象。 这种表示实际上三.四 两种方式的结合使用。{"person":value},
value是一个单个对象。
这个时候取值只要将前面的person带上即可。 先找到对应的key(person), 找到Key之后，继续找里面的key。 嵌套使用
//定义成json对象，用{} 拓起来 var obj={"person":{"name":"两个蝴蝶飞","age":24,"sex":"男"}}; console.log("类型:"+typeof(obj)); //为object $("#name").text(obj.person.name); //正常取的方式,这种才会显示(采用) $("#age").text(obj.person.money); //没有money值，不出错，但也不会显示 $("#sex").text(obj.sex);//是找不到男这个值 的。不出错，也不会显示
四.三 添加对象属性
var obj={"name":"两个蝴蝶飞","age":24,"sex":"男"}; console.log("类型:"+typeof(obj)); //添加一个对象属性为money obj.money="新添加的money属性"; $("#name").text(obj.money); //取出的值为:新添加的money属性 $("#age").text(obj.age); $("#sex").text(obj.sex);
让JSON对象新.一个要添加的属性即可。 即obj.name="要添加的值";
所以有的时候，如果添加的层次较多的话，可以这样添加.
var obj={}; obj.name="两个蝴蝶飞"; obj.age=24; obj.sex="男"; $("#name").text(obj.name); $("#age").text(obj.age); $("#sex").text(obj.sex);
四.四 修改对象属性
//定义成json对象，用{} 拓起来 var obj={"name":"两个蝴蝶飞","age":24,"sex":"男"}; console.log("类型:"+typeof(obj)); //修改名称的值 直接用=号 obj.name="两个蝴蝶飞啊飞啊"; $("#name").text(obj.name); //取出的值为:两个蝴蝶飞啊飞啊 $("#age").text(obj.age); $("#sex").text(obj.sex);
修改对象用取出的值="新值"; 即可。
要改变的值存在的话，为修改。 不存在的话， 为添加。
四.五 删除对象属性
//定义成json对象，用{} 拓起来 var obj={"name":"两个蝴蝶飞","age":24,"sex":"男"}; console.log("类型:"+typeof(obj)); //删除一个属性 delete obj.age; $("#name").text(obj.name); $("#age").text(obj.age); // 被删除了，无法取出 $("#sex").text(obj.sex);
这个时候，就会删除掉age这个属性。
如果是:
//删除obj delete obj;
这个时候，是并不会删除的obj对象的。 obj.name,obj.age,obj.sex是依旧可以取出的。只能 delete 对象.属性。
五 数组对象 Array 用[ ]括起来,用索引取出值
简单来说，常见的数组对象可以分为两种，第一种，是单值的情况。第二种，是对象情况。
五.一 单值数组
1. 放置同一种类型的
var obj=[12,24,36,48];
取出值时，用索引下标进行取出。
//定义成json数组对象，用[]拓起来 var obj=[12,24,36,48]; console.log(obj[0]); //12 console.log(obj[obj.length-1]); //48 console.log(obj[obj.length]);//undefined
2 .其中，放置的值可以为同一个类型的，也可以为不同的类型的。
//定义成json数组对象，用[]拓起来 var obj=["两个蝴蝶飞",24,false,true,null,"男"]; console.log(obj[0]); //两个蝴蝶飞 console.log(obj[obj.length-1]);//男 console.log(obj[obj.length]);//undefined
这里面的值有字符串，数字，布尔值，还有null。
3. 也可以放置对象类型
//定义成json数组对象，用[]拓起来 var obj=["两个蝴蝶飞",24,false,true,null,{'name':'两个蝴蝶飞','age':24,'sex':'男'}]; console.log(obj[0]);//两个蝴蝶飞 console.log(obj[obj.length-1].name);//两个蝴蝶飞 console.log(obj[obj.length-1].age);//24
五.二 对象数组
里面的值放置多个对象，是第一种单值的变形体。很常用的一种方式 (即Java 中List<JavaBean> 形式)
当然里面也可以进行嵌套，但这里只是简单的形式。
var obj = [ {'name':'慧芳','age':28,'sex':'女'}, {'name':'莉莉','age':26,'sex':'女'}, {'name':'两个蝴蝶飞','age':24,'sex':'男'} ];
一般常见写成key:value 形式，即将array写成value形式
var obj = {"persons": [{'name':'慧芳','age':28,'sex':'女'}, {'name':'莉莉','age':26,'sex':'女'}, {'name':'两个蝴蝶飞','age':24,'sex':'男'}] };
五.三 对象数组的输出
第一种形式输出:
// 第一种形式 for(var i=0;i<obj.persons.length;i++){ // 不要写成 var p=obj.persons[i], 然后p.name (这是错误的) console.log(obj.persons[i].name); console.log(obj.persons[i].age); console.log(obj.persons[i].sex); }
第二种形式输出:
// 第二种形式 for(var p in obj.persons){ //都是先取出obj.persons[p] console.log(obj.persons[p].name); console.log(obj.persons[p].age); console.log(obj.persons[p].sex); }
3. 上面是JSON常见的两种形式输出，当成Jquery进行整合之后，可以用Jquery的循环遍历进行输出
// 第三种形式, each形式循环遍历输出 $.each(obj.persons,function(n,value){ console.log(value.name); console.log(value.age); console.log(value.sex); })
六 JSON形式字符串复杂格式
json对象之间可以相互的嵌套，可以对象与数组嵌套，也可以对象与单值嵌套，也可以单值与数组进行嵌套。
有时候，嵌套的时候很容易出错。 可以利用工具进行相应的解析和验证。
推荐菜鸟教程的工具: https://c.runoob.com/front-end/53
在解析的时候，也要慢慢的进行相应的解析，层层进行解析。
七 JSON对象与JSON字符串之间相互转换
七.一 JSON对象转换成JSON字符串
1. var result=JSON.stringify(obj);
七.二 JSON字符串转换成JSON对象
1. var obj= JSON.parse(result)
2. var obj= $.parseJSON(result)
3. var obj=eval('(' + result + ')');
在解析和遍历时，要注意嵌套的顺序。
