1.什么是 JSON ?
JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)
JSON 是轻量级的文本数据交换格式
JSON 独立于语言:JSON 使用 Javascript语法来描述数据对象,但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。
目前非常多的动态(PHP,JSP,.NET)编程语言都支持JSON。
JSON-- 独立于语言的轻量级的文本数据交换格式。
在没有JSON之前我们使用XML充当数据交换格式。
JSON与 XML 相同之处
- JSON 是纯文本
- JSON 具有"自我描述性"(人类可读)
- JSON 具有层级结构(值中存在值)
- JSON 可通过 JavaScript 进行解析
- JSON 数据可使用 AJAX 进行传输
JSON与 XML 不同之处
- 没有结束标签
- 更短
- 读写的速度更快
- 能够使用内建的 JavaScript eval() 方法进行解析
- 使用数组
- 不使用保留字
2.为什么使用JSON?
对于 AJAX 应用程序来说,JSON 比 XML 更快更易使用:
使用 XML
读取 XML 文档
使用 XML DOM 来循环遍历文档
读取值并存储在变量中
使用 JSON
读取 JSON 字符串
用 eval() 处理 JSON 字符串
3.JSON数据组成
1.JSON对象
“{}”--json对象
“{}”包含---名称/值对【键值对】/ json数组 / json对象
JSON 名称/值对【键值对】书写格式是:
key : value-----”name”:zhangsan
JSON 名称/值对【键值对】中的键,使用双引号包围
JSON 名称/值对【键值对】中的值
1.数字(整数或浮点数) "age":30
2.字符串(在双引号中)”name”:”zhangsan”
3.逻辑值(true 或 false)"flag":true
4.数组(在中括号中)”array”:[]
5.对象(在大括号中)”obj”:{}
6.null "runoob":null
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function(){
var student={
"stuid":1001,
"stuname":"zhangsan",
"stusex":true,
"stuaddress":["西安","北京"],
"classinfo":{"classid":"20210325","classname":"前端班"}
};
alert(student); //[object Object] -- json对象
}
</script>
</head>
<body>
</body>
</html>
2.JSON数组
“[]”--json数组
“[]”包含---具体数据值/json对象
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function(){
//var address=["西安","北京"];
var address=[
{"type":"家庭地址","info":"西安高新一路"},
{"type":"工作地址","info":"西安丈八四路"},
];
alert(address[1].info);
}
</script>
</head>
<body>
</body>
</html>
比较复杂的json数据都是对象中有数组,数组中有对象的嵌套结构。
{"HeWeather5":[{"aqi":{"city":{"aqi":"99","qlty":"良","pm25":"43","pm10":"148","no2":"36","so2":"10","co":"0.6","o3":"65"}},"basic":{"city":"西安","cnty":"中国","id":"CN101110101","lat":"34.26316071","lon":"108.94802094","update":{"loc":"2021-03-25 09:47","utc":"2021-03-25 01:47"}},"daily_forecast":[{"astro":{"mr":"15:05","ms":"04:39","sr":"06:39","ss":"19:00"},"cloud":"25","cond":{"code_d":"104","code_n":"305","txt_d":"阴","txt_n":"小雨"},"date":"2021-03-25","hum":"73","pcpn":"0.0","pop":"25","pres":"963","tmp":{"max":"19","min":"11"},"uv":"3","vis":"16","wind":{"deg":"45","dir":"东北风","sc":"3-4","spd":"15"}},{"astro":{"mr":"16:12","ms":"05:19","sr":"06:37","ss":"19:01"},"cloud":"58","cond":{"code_d":"305","code_n":"101","txt_d":"小雨","txt_n":"多云"},"date":"2021-03-26","hum":"71","pcpn":"1.4","pop":"58","pres":"960","tmp":{"max":"16","min":"7"},"uv":"2","vis":"24","wind":{"deg":"180","dir":"南风","sc":"1-2","spd":"7"}},{"astro":{"mr":"17:21","ms":"05:56","sr":"06:36","ss":"19:02"},"cloud":"0","cond":{"code_d":"100","code_n":"100","txt_d":"晴","txt_n":"晴"},"date":"2021-03-27","hum":"28","pcpn":"0.0","pop":"0","pres":"958","tmp":{"max":"22","min":"6"},"uv":"7","vis":"25","wind":{"deg":"0","dir":"北风","sc":"1-2","spd":"3"}}],"now":{"cond":{"code":"101","txt":"多云"},"dew":"4","fl":"13","hum":"56","pcpn":"0.0","pres":"968","tmp":"14","vis":"15","wind":{"deg":"125","dir":"东南风","sc":"1","spd":"4"}},"status":"ok","suggestion":{"air":{"brf":"良","txt":"气象条件有利于空气污染物稀释、扩散和清除,可在室外正常活动。"},"comf":{"brf":"舒适","txt":"白天不太热也不太冷,风力不大,相信您在这样的天气条件下,应会感到比较清爽和舒适。"},"cw":{"brf":"较适宜","txt":"较适宜洗车,未来一天无雨,风力较小,擦洗一新的汽车至少能保持一天。"},"drsg":{"brf":"较舒适","txt":"建议着薄外套、开衫牛仔衫裤等服装。年老体弱者应适当添加衣物,宜着夹克衫、薄毛衣等。"},"flu":{"brf":"少发","txt":"各项气象条件适宜,无明显降温过程,发生感冒机率较低。"},"sport":{"brf":"较不宜","txt":"有扬沙或浮尘,建议适当停止户外运动,选择在室内进行运动,以避免吸入更多沙尘,有损健康。"},"trav":{"brf":"适宜","txt":"天气较好,风稍大,但温度适宜,总体来说还是好天气。这样的天气适宜旅游,您可以尽情享受大自然的风光。"},"uv":{"brf":"最弱","txt":"属弱紫外线辐射天气,无需特别防护。若长期在户外,建议涂擦SPF在8-12之间的防晒护肤品。"}}},{"aqi":{"city":{"aqi":"59","qlty":"良","pm25":"35","pm10":"68","no2":"41","so2":"23","co":"0.7","o3":"47"}},"basic":{"city":"西安","cnty":"中国","id":"CN101050311","lat":"44.5810318","lon":"129.6131134","update":{"loc":"2021-03-25 09:47","utc":"2021-03-25 01:47"}},"daily_forecast":[{"astro":{"mr":"13:11","ms":"03:44","sr":"05:13","ss":"17:41"},"cloud":"55","cond":{"code_d":"305","code_n":"404","txt_d":"小雨","txt_n":"雨夹雪"},"date":"2021-03-25","hum":"87","pcpn":"1.0","pop":"55","pres":"975","tmp":{"max":"10","min":"-3"},"uv":"2","vis":"24","wind":{"deg":"315","dir":"西北风","sc":"1-2","spd":"3"}},{"astro":{"mr":"14:25","ms":"04:17","sr":"05:11","ss":"17:43"},"cloud":"1","cond":{"code_d":"104","code_n":"305","txt_d":"阴","txt_n":"小雨"},"date":"2021-03-26","hum":"75","pcpn":"0.0","pop":"1","pres":"968","tmp":{"max":"12","min":"1"},"uv":"3","vis":"24","wind":{"deg":"225","dir":"西南风","sc":"1-2","spd":"3"}},{"astro":{"mr":"15:42","ms":"04:47","sr":"05:09","ss":"17:44"},"cloud":"25","cond":{"code_d":"101","code_n":"101","txt_d":"多云","txt_n":"多云"},"date":"2021-03-27","hum":"86","pcpn":"0.0","pop":"25","pres":"960","tmp":{"max":"18","min":"2"},"uv":"5","vis":"25","wind":{"deg":"225","dir":"西南风","sc":"1-2","spd":"3"}}],"now":{"cond":{"code":"104","txt":"阴"},"dew":"-6","fl":"0","hum":"66","pcpn":"0.0","pres":"980","tmp":"3","vis":"16","wind":{"deg":"340","dir":"西北风","sc":"2","spd":"9"}},"status":"ok","suggestion":{"air":{"brf":"良","txt":"气象条件有利于空气污染物稀释、扩散和清除,可在室外正常活动。"},"comf":{"brf":"较舒适","txt":"白天会有少量降雨,这种天气条件下,人们会感到有些凉意,但大部分人完全可以接受。"},"cw":{"brf":"不宜","txt":"不宜洗车,未来24小时内有雨,如果在此期间洗车,雨水和路上的泥水可能会再次弄脏您的爱车。"},"drsg":{"brf":"较冷","txt":"建议着厚外套加毛衣等服装。年老体弱者宜着大衣、呢外套加羊毛衫。"},"flu":{"brf":"易发","txt":"昼夜温差大,且空气湿度较大,易发生感冒,请注意适当增减衣服,加强自我防护避免感冒。"},"sport":{"brf":"较不宜","txt":"有降水,推荐您在室内进行健身休闲运动;若坚持户外运动,须注意保暖并携带雨具。"},"trav":{"brf":"适宜","txt":"温度适宜,又有较弱降水和微风作伴,会给您的旅行带来意想不到的景象,适宜旅游,可不要错过机会呦!"},"uv":{"brf":"弱","txt":"紫外线强度较弱,建议出门前涂擦SPF在12-15之间、PA+的防晒护肤品。"}}},{"aqi":{"city":{"aqi":"42","qlty":"优","pm25":"26","pm10":"42","no2":"36","so2":"12","co":"1.1","o3":"55"}},"basic":{"city":"西安","cnty":"中国","id":"CN101060705","lat":"42.92041397","lon":"125.15142059","update":{"loc":"2021-03-25 09:47","utc":"2021-03-25 01:47"}},"daily_forecast":[{"astro":{"mr":"13:35","ms":"03:56","sr":"05:31","ss":"17:58"},"cloud":"2","cond":{"code_d":"100","code_n":"101","txt_d":"晴","txt_n":"多云"},"date":"2021-03-25","hum":"64","pcpn":"0.0","pop":"2","pres":"980","tmp":{"max":"17","min":"-2"},"uv":"5","vis":"25","wind":{"deg":"270","dir":"西风","sc":"3-4","spd":"20"}},{"astro":{"mr":"14:48","ms":"04:31","sr":"05:29","ss":"18:00"},"cloud":"25","cond":{"code_d":"104","code_n":"305","txt_d":"阴","txt_n":"小雨"},"date":"2021-03-26","hum":"70","pcpn":"0.0","pop":"25","pres":"973","tmp":{"max":"16","min":"4"},"uv":"2","vis":"25","wind":{"deg":"225","dir":"西南风","sc":"1-2","spd":"7"}},{"astro":{"mr":"16:03","ms":"05:02","sr":"05:28","ss":"18:01"},"cloud":"1","cond":{"code_d":"101","code_n":"101","txt_d":"多云","txt_n":"多云"},"date":"2021-03-27","hum":"78","pcpn":"0.0","pop":"1","pres":"963","tmp":{"max":"17","min":"5"},"uv":"5","vis":"25","wind":{"deg":"225","dir":"西南风","sc":"1-2","spd":"11"}}],"now":{"cond":{"code":"100","txt":"晴"},"dew":"-3","fl":"6","hum":"39","pcpn":"0.0","pres":"982","tmp":"11","vis":"16","wind":{"deg":"226","dir":"西南风","sc":"4","spd":"21"}},"status":"ok","suggestion":{"air":{"brf":"良","txt":"气象条件有利于空气污染物稀释、扩散和清除,可在室外正常活动。"},"comf":{"brf":"舒适","txt":"白天不太热也不太冷,风力不大,相信您在这样的天气条件下,应会感到比较清爽和舒适。"},"cw":{"brf":"较不宜","txt":"较不宜洗车,未来一天无雨,风力较大,如果执意擦洗汽车,要做好蒙上污垢的心理准备。"},"drsg":{"brf":"冷","txt":"天气冷,建议着棉服、羽绒服、皮夹克加羊毛衫等冬季服装。年老体弱者宜着厚棉衣、冬大衣或厚羽绒服。"},"flu":{"brf":"极易发","txt":"天气寒冷,昼夜温差极大且风力较强,易发生感冒,请注意适当增减衣服,加强自我防护避免感冒。"},"sport":{"brf":"较适宜","txt":"天气较好,但因风力稍强,户外可选择对风力要求不高的运动,推荐您进行室内运动。"},"trav":{"brf":"适宜","txt":"天气较好,风稍大,但温度适宜,是个好天气哦。适宜旅游,您可以尽情地享受大自然的无限风光。"},"uv":{"brf":"最弱","txt":"属弱紫外线辐射天气,无需特别防护。若长期在户外,建议涂擦SPF在8-12之间的防晒护肤品。"}}}]}
面对上面的复杂json数据,我们往往不能看清他的结构,这时我们可以借助工具来查看json的结构
4.JSON数据转换
我们得到的json数据有可能是json对象,也有可能是json字符串。因此我们就需要将json对象与json字符串进行转换。
1.判断得到是json对象还是json字符串。
alert(student); ---- [object Object] -- json对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function(){
//json对象
var student={
"stuid":1001,
"stuname":"zhangsan",
"stusex":true,
"stuaddress":["西安","北京"],
"classinfo":{"classid":"20210325","classname":"前端班"}
};
alert(student); //[object Object] -- json对象
var studentinfo="{\"stuid\":1001,"+
"\"stuname\":\"zhangsan\","+
"\"stusex\":true,"+
"\"stuaddress\":[\"西安\",\"北京\"],"+
"\"classinfo\":{\"classid\":\"20210325\","+
"\"classname\":\"前端班\"}}";
alert(studentinfo);
}
</script>
</head>
<body>
</body>
</html>
2.json对象转换为字符串
可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。
例如:
var student={
"stuid":1001,
"stuname":"zhangsan",
"stusex":true,
"stuaddress":["西安","北京"],
"classinfo":{"classid":"20210325","classname":"前端班"}
};
alert(student);
//Json对象转换成Json字符串
//可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。
var jsonstr=JSON.stringify(student);
alert(jsonstr);
3.json字符串转换成json 对象
1.使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
2.eval("("+str+")");
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function(){
var studentinfo="{\"stuid\":1001,"+
"\"stuname\":\"zhangsan\","+
"\"stusex\":true,"+
"\"stuaddress\":[\"西安\",\"北京\"],"+
"\"classinfo\":{\"classid\":\"20210325\","+
"\"classname\":\"前端班\"}}";
alert(studentinfo);
//json字符串转换成Json对象
//使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
//var jsonobj=JSON.parse(studentinfo);
//eval("("+字符串+")")
var jsonobj=eval("("+studentinfo+")");
alert(jsonobj);
}
</script>
</head>
<body>
</body>
</html>
5.JSON数据的解析
1.将json数据转换为json对象
2.json对象名称.属性名称
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function(){
var student={
"stuid":1001,
"stuname":"zhangsan",
"stusex":false,
"stuaddress":["西安","北京"],
"classinfo":{"classid":"20210325","classname":"前端班"}
};
document.write("<h1>学生编号:"+student.stuid+"</h1>");
document.write("<h1>学生姓名:"+student.stuname+"</h1>");
if(student.stusex){
document.write("<h1>学生性别:男</h1>");
}else{
document.write("<h1>学生性别:女</h1>");
}
var addressArray=student.stuaddress;
var addressstr="";
for(var i=0;i<addressArray.length;i++){
addressstr=addressstr+addressArray[i]+",";
}
addressstr=addressstr.substring(0,addressstr.lastIndexOf(","));
document.write("<h1>学生地址:"+addressstr+"</h1>");
document.write("<h1>班级编号:"+student.classinfo.classid+"</h1>");
document.write("<h1>班级名称:"+student.classinfo.classname+"</h1>");
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function(){
var studentinfo="{\"stuid\":1001,"+
"\"stuname\":\"zhangsan\","+
"\"stusex\":true,"+
"\"stuaddress\":[{\"type\":\"家庭地址\",\"info\":\"西安高新一路\"},"+
"{\"type\":\"工作地址\",\"info\":\"西安丈八四路\"}],"+
"\"classinfo\":{\"classid\":\"20210325\","+
"\"classname\":\"前端班\"}}";
var jsonobj=JSON.parse(studentinfo);
document.write("<h1>学生编号:"+jsonobj.stuid+"</h1>");
document.write("<h1>学生姓名:"+jsonobj.stuname+"</h1>");
if(jsonobj.stusex){
document.write("<h1>学生性别:男</h1>");
}else{
document.write("<h1>学生性别:女</h1>");
}
var addressArray=jsonobj.stuaddress;
for(var i=0;i<addressArray.length;i++){
document.write("<h1>"+addressArray[i].type+":"+addressArray[i].info+"</h1>");
}
document.write("<h1>班级编号:"+jsonobj.classinfo.classid+"</h1>");
document.write("<h1>班级名称:"+jsonobj.classinfo.classname+"</h1>");
}
</script>
</head>
<body>
</body>
</html>