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() 方法进行解析
- 使用数组
- 不使用保留字
为什么使用 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>
//JavaScript对象
/*var student={stuid:1001,stuname:"zhangsan"};
student.stuage=23;
alert(student.stuage);*/
//json对象
/*var person={"perid":1002,"pername":"lisi"};
//alert(person.perid);
person.perage=20;
alert(person.perage);*/
var jsonstu={
"stuid":1001,
"stuname":"wangyi",
"stusex":true,
"jobarr":["上海","西安"],
"jsonobj":{"obj1":"wangyi","obj2":"tengxvn"}
};
alert(jsonstu);
</script>
</head>
<body>
</body>
</html>2.json数组
“[]”--json数组
“[]”包含---具体数据值/json对象、
json对象中可以包含数组/其他对象
json数组可以包含json对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var studentjson={
"stuid":1001,
"stuname":"wangyi",
"stusex":true,
"jobarr":[{"boj1":"xian","bojarr1":4},{"boja2":"beijing","objarr2":4}],
"jsonobj":{"obj1":"wangyi","obj2":"tengxvn"}
};
alert(studentjson);
</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对象
2.Json对象转换成Json字符串
可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//1.Json对象转换成Json字符串
//可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串
var jsonstu={
"stuid":1002,
"stuname":"zhaoliu",
"stusex":true,
"stuarr":[{"arr1":1,"arr2":"西安"},
{"arr1":2,"arr2":"深圳"}]
};
//alert(jsonstu)
//var jsonstr=JSON.stringify(jsonstu);
alert(jsonstr);
</script>
</head>
<body>
</body>
</html>3.json字符串转换成Json对象
1.使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
2.eval("("+str+")");
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//2.Json字符串转换成Json对象
//1.使用 JSON.parse() 方法将数据转换为 JavaScript 对象
/*var student2="{\"stuid\":1001,"+
"\"stuname\":\"zhangsan\","+
"\"stusex\":true,"+
"\"stuaddress\":[{\"addresstype\":\"家庭\",\"addressinfo\":\"西安\"},"+
"{\"addresstype\":\"工作\",\"addressinfo\":\"北京\"}]}";
var jsonobj1=JSON.parse(student2);
alert(jsonobj1);*/
//2.eval("("+str+")");
var student3="{\"stuid\":1001,"+
"\"stuname\":\"zhangsan\","+
"\"stusex\":true,"+
"\"stuaddress\":[{\"addresstype\":\"家庭\",\"addressinfo\":\"西安\"},"+
"{\"addresstype\":\"工作\",\"addressinfo\":\"北京\"}]}";
var jsonobj2=eval("("+student3+")");
alert(jsonobj2);
</script>
</head>
<body>
</body>
</html>5.JSON数据的解析
1.将json数据变成json对象
2.json对象名称.属性名称
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/*var student1="{\"stuid\":1001,"+
"\"stuname\":\"zhangsan\","+
"\"stusex\":true,"+
"\"stuaddress\":[{\"addresstype\":\"家庭\",\"addressinfo\":\"西安\"},"+
"{\"addresstype\":\"工作\",\"addressinfo\":\"北京\"}]}";*/
var jsonstu={
"stuid":1002,
"stuname":"zhaoliu",
"stusex":true,
"stuarr":[{"arr1":1,"arr2":"西安"},
{"arr1":2,"arr2":"深圳"}]
};
document.write("<h5>学生编号:"+jsonstu.stuid+"</h5>");
document.write("<h5>学生姓名:"+jsonstu.stuname+"</h5>");
if(jsonstu.syusex){
document.write("<h5>学生性别:男</h5>");
}else{
document.write("<h5>学生性别:女</h5>");
}
var addressArray=jsonstu.stuarr;
for(var i=0;i<addressArray.length;i++){
document.write("<h5>"+addressArray[i].arr1+":"+addressArray[i].arr2+"</h5>");
}
</script>
</head>
<body>
</body>
</html>
117
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
