JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
<!--JSON对象-->
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//如何定义JSON对象{'键名':值,键名2':值2};
var stuJSON={'name':'张三','age':23,'sex':true};
//取数据:方式1:键找值
var name=stuJSON.name;
alert(name);
alert(stuJSON.age);
alert(stuJSON.sex);
//方式2:
var name2=stuJSON['name'];
alert(name2)
alert("下面的")
//如何遍历JSON对象
for(key in stuJSON){
alert(stuJSON[key]);
}
alert("下面的数组")
//遍历数组 for in
var arr=["aaa","bbbb","cccc","dddd"];
for(index in arr){
alert(arr[index]);
}
// String stu="{'name':'张三','age':23,'sex':true}"
</script>
</head>
<body>
</body>
</html>
JSON解析
//JSON语法的严谨格式,不要格式化,紧凑风格,键值对不要有换行空格
JSON.parse()这个方法,/把JSON字符串解析成JSON对象,在解析JSON字符串时,注意JSON字符串要原始格式(JSON字符串没有换行和空格)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" width="300px" height="200px">
<tr>
<td id="td1">Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
<script type="text/javascript">
var jsonStr =
'{"code":200,"msg":"成功!","data":{"yesterday":{"date":"18日星期二","high":"高温 27℃","fx":"无持续风向","low":"低温 20℃","fl":"\u003c![CDATA[\u003c3级]]\u003e","type":"阴"},"city":"成都","aqi":null,"forecast":[{"date":"19日星期三","high":"高温 27℃","fengli":"\u003c![CDATA[\u003c3级]]\u003e","low":"低温 20℃","fengxiang":"无持续风向","type":"多云"},{"date":"20日星期四","high":"高温 30℃","fengli":"\u003c![CDATA[\u003c3级]]\u003e","low":"低温 22℃","fengxiang":"无持续风向","type":"多云"},{"date":"21日星期五","high":"高温 29℃","fengli":"\u003c![CDATA[\u003c3级]]\u003e","low":"低温 21℃","fengxiang":"无持续风向","type":"阵雨"},{"date":"22日星期六","high":"高温 26℃","fengli":"\u003c![CDATA[\u003c3级]]\u003e","low":"低温 19℃","fengxiang":"无持续风向","type":"小雨"},{"date":"23日星期天","high":"高温 23℃","fengli":"\u003c![CDATA[\u003c3级]]\u003e","low":"低温 19℃","fengxiang":"无持续风向","type":"小雨"}],"ganmao":"各项气象条件适宜,无明显降温过程,发生感冒机率较低。","wendu":"26"}}'
var obj = JSON.parse(jsonStr); //JSON.parse()这个方法,在解析JSON字符串时,注意JSON字符串要原始格式(JSON字符串没有换行和空格)
//alert(obj);
var sonJSON=obj.data.yesterday;
//sonJSON.date
// document.getElementById("td1").innerText=sonJSON.date;
var tds=document.getElementsByTagName("td");
var keyarr=new Array();
for(key in sonJSON){
keyarr.push(key);
}
//alert(keyarr);
// for(var i=0;i<tds.length;i++){
// tds[i].innerText=sonJSON.keyarr[i];
// }
for(index in tds){
//alert(index);
tds[index].innerText=sonJSON[keyarr[index]];
}
</script>
</body>
</html>
JSON嵌套
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var json = {
name: '张三',
age: '23',
data: {
sonname: 'sonson',
sonage: 100,
},
arr:[10,30,40],
method:function(){
alert("abc");
},
//ES6的语法
test(){
alert("test");
},
// test:function(){ 上面不简写
//
// }
};
//取sonson
// var name=json.data.sonname;
// alert(name);
// var v=json.arr
// var num=v[2];
// alert(num);
// json.method();
// json.test();
//还有一种封装形式 数组的元素放的是JSON对象
var jsonArr=[{'name':'张三',age:23},{'name':'李四',age:24},{'name':'王五',age:25}];
//var v=jsonArr[0].name;
//alert(v);
for(index in jsonArr){
var obj=jsonArr[index];
for(key in obj){
alert(key+"==="+obj[key]);
}
}
</script>
</head>
<body>
</body>
</html>
JSON对象和JSON字符串的互转
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// { "name":"runoob", "alexa":10000, "site":"www.runoob.com" }
//
// 我们使用 JSON.parse() 方法处理以上数据,将其转换为 JavaScript 对象:
//外面是单引号 注意:单引号括JSON对象,就变成JSON字符串
var str='{"name":"runoob", "alexa":10000, "site":"www.runoob.com"}'
var obj = JSON.parse(str); //把JSON字符串解析成JSON对象
alert(obj.name);
var loginJSON={"username":"zhangsan","password":"123456"};
var jsonString=JSON.stringify(loginJSON); //把JSON对象变成JSON字符串
alert(jsonString);
alert(typeof jsonString);
</script>
</head>
<body>
</body>
</html>