1.什么是JSON，作用？
JSON是数据交换格式，作用：JSON可以将系统A与系统B交换数据； 如C语言与JAVA语言交换数据
2.JSON体积小，轻量级
3.实际开发中有两种数据交换格式：JSON和XML。XML体积大，解析麻烦，优点：语法严谨。（银行用它）
(1)JSON语法格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON</title>
</head>
<body>
<script type="text/javascript">
/*
* 语法格式：var jsonObj={
"属性名":"属性值",
"属性名":"属性值",
"属性名":"属性值",
....
};
* */
//创建JSON对象（JSON也可以称为无类型对象。轻量级，体积小，容易解析）
var studentObj={
"sno":"110",
"sname": "张三",
"sex" : "男"
};
//访问JSON对象属性
alert(studentObj.sno+","+studentObj.sname+","+studentObj.sex);
//JSON数组
var students=[
{"sno":"110","sname":"张三","sex":"男"},
{"sno":"111","sname":"李四","sex":"女"},
{"sno":"112","sname":"王五","sex":"男"},
];
//遍历
for(var i in students){
var stuObj=students[i];
alert(stuObj.sno+","+stuObj.sname+","+stuObj.sex);
}
</script>
</body>
</html>
(2) 案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复杂一些JSON对象</title>
</head>
<body>
<script type="text/javascript">
var user={
"usercode":110,
"username":"张三",
"sex":true,
"address":{
"city":"北京",
"street":"大兴区",
"zipcode":234589,
},
"aihao":["吸烟","喝酒","唱歌"]
}
//访问人名以及居住城市
alert(user.username+"居住在"+user.address.city);
/*设计JSON格式数据：可以描述整个班级中每一个学生的信息，以及总人数的信息*/
var classObj={
"count":76,
"classname":"高二<2>班",
"location":"北京市朝阳区阳光小学",
"students":{
"name":["张三","李四","王五"],
"aihao":["学习"]
}
}
alert(classObj.classname+"在"+classObj.location+", 学生为"+classObj.students.name);
</script>
</body>
</html>
(3) eval函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>eval函数</title>
</head>
<body>
<script type="text/javascript">
//eval函数的作用:将字符串当做一段JS代码解释并执行。
window.eval("var i=123;");
alert("i="+i);//123
/*
* java连接数据库，查询数据之后，将数据在Java程序中拼接成JSON格式的“字符串”,将json格式的字符串响应到浏览器，
* 也就是说java响应到浏览器上的仅仅是一个“JSON格式的字符串”，还不是一个json对象，
* 可以使用eval函数，将json格式的字符串转换成json对象。
* */
var fromJava="{\"name\":\"zhangsan\",\"password\":\"123\"}";//这是java程序给发过来的json格式的”字符串“
//将以上的json格式的字符串转换成json对象
window.eval("var jsonObj="+fromJava);
//访问json对象
alert(jsonObj.name+","+jsonObj.password);
/*
* 面试题：在JS代码中，[]和{}有什么区别？
* []是JS数组，
* {}是JSON
* */
</script>
</body>
</html>
(4) 设置table的tbody
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置table的tbody</title>
</head>
<body>
<script type="text/javascript">
//json数据
var data={
"total":4,
"emps":[
{"empno":7369,"ename":"SMITH","sal":800.0},
{"empno":7361,"ename":"JACK","sal":1800.0},
{"empno":7371,"ename":"TOM","sal":3800.0},
{"empno":7380,"ename":"KOOK","sal":580.0},
]
};
//把数据展示到table当中
window.onload=function () {
var displayBtnElt=document.getElementById("displayBtn");
displayBtnElt.onclick=function () {
var emps=data.emps;
var html="";
for(var i in emps){
var emp=emps[i];
html +="<tr>";
html +="<td>"+emp.empno+"</td>";
html +="<td>"+emp.ename+"</td>";
html +="<td>"+emp.sal+"</td>";
html +="</tr>";
}
document.getElementById("empbody").innerHTML=html;
document.getElementById("count").innerHTML=data.total;
}
}
</script>
<input type="button" value="显示员工信息列表" id="displayBtn"/>
<center><h1>员工信息列表</h1></center>
<hr color="red">
<table align="center" border ="1px" width="50%">
<tr>
<th>员工编号</th>
<th>员工名字</th>
<th>员工薪资</th>
</tr>
<tbody id="empbody">
<!--<tr>
<th>7369</th>
<th>SMITH</th>
<th>800.0</th>
</tr>
<tr>
<th>7369</th>
<th>SMITH</th>
<th>800.0</th>
</tr>
<tr>
<th>7369</th>
<th>SMITH</th>
<th>800.0</th>
</tr>-->
</tbody>
</table>
总共<span id="count"></span>条数
</body>
</html>
来源：CSDN
作者：灰色头像JH
链接：https://blog.csdn.net/JH39456194/article/details/103976718