JSON–JS的对象（Java中的字符串）
JSON相对于XML的优势：
JSON更小：相同的信息量来说的话，JSON格式更小
JSON更快：传输速度更快
更容易解析：JSON的解析比XML要简单的多
JSON的语法
1、{} 大括号表示一个JSON的对象
2、[ ]中扩号表示一个JSON的对象的数组
1、对象类型
{属性名1:值1,属性名2:值2，…}
2、数组类型
[
{属性名1:值1,属性名2:值2，…},
{属性名1:值1,属性名2:值2，…},
{属性名1:值1,属性名2:值2，…}
]
3、复杂对象
{
name:value,
sex:value,
hobbies:[
{name:‘足球’,属性名2:值2，…},
{name:‘足球’,属性名2:值2，…}
]
}
json的类型：
1、name必须是string类型–》建议加上一个双引号
2、value必须是如下类型之一：
字符串—》用双引号进行包裹
数字
对象（JSON对象）
数组
布尔
null
<script type="text/javascript">/*json介绍1.定义格式 1：{key:value,key:value,...}2.定义格式 2：[{key:value,key:value,...},{key:value,key:value,...}，{key:value,key:value,...},...]3.定义格式 3：{key:value,key:[key:value,key1:value1,...],key:value,...}*/let person={"name":"张三","age":18,"sex":"男","address":"北京",}//1、获取json对象中的value数据//1.1、通过对象名.属性名console.log(person.name);console.log(person.age);// json数组let addr=[{"name":"张三","age":18,"sex":"男","address":"北京"},{"name":"李四","age":19,"sex":"男","address":"上海" }];//通过遍历数组获取json对象for(let i=0;i<addr.length;i++){console.log(addr[i].name);}console.log(addr[1].address);</script>
axios和JSON的综合使用
1、将相关的数据（通过模版字符串的形式`${}`）拼接到content变量中 -->注意这里的是反引号不是单引号esc键下面的按键
content+=`<tr>
<td>${name}</td>
<td>${id}</td>
<td>${age}</td>
</tr>`
2、通过标签对象的innerHTML属性设置标签中的值（不止是文本）也可以是其他的子标签
具体代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>ajax和json综合</h1>
<!--获取好友列表
-->
<input type="button" value="响应数据是json字符串" onclick="method01()"> <br>
<hr>
<h3>好友列表</h3>
<!--存放查询好友的结果信息-->
<div id="messageDiv"></div>
<table width="500px" cellspacing="0px" cellpadding="5px" border="1px" id="myTable"><tr><th>id</th><th>name</th><th>age</th></tr><!--<tr><td></td><td></td><td></td></tr>--></table></body>
<!--导入axios库-->
<script src="js/axios-0.18.0.js"></script>
<script type="text/javascript">/*需求：向后台发送请求，获取好友列表并显示到页面中说明：后台的url地址： "http://localhost:8080/axiosJsonDemo01Servlet"*/function method01() {//向后台发送请求axios.get("http://localhost:8080/axiosJsonDemo01Servlet").then(Response=>{//测试是否绑定成功// console.log("绑定成功");console.log(Response.data);// 定义一个变量来接收响应的数据变量let result=Response.data;/*result={"flag": "true","message": "查询好友列表成功","valueData": [{"age": 18, "id": '001', "name": '张三'},{"age": 19, "id": '002', "name": '李四'},{"age": 20, "id": '003', "name": '王五'}]}*/ // 1、判断flag的值，如果是true，说明查询成功if(result.flag){// 2、获取message的值let message = result.message;//3、将message的值显示到页面中去--->通过标签对象的innerHTML属性设置标签中的值（不止是文本）也可以是其他的子标签document.getElementById("messageDiv").innerHTML=message;// 4、通过一个变量存储valueData的值let valueData = result.valueData;//4.1定义一个变量用来存储table标签中的内容let content="";// 5、遍历valueData数组，获取数组中的每一个json对象for(let i=0;i<valueData.length;i++){// 6、获取每一个json对象中的数据let id = valueData[i].id;let name = valueData[i].name;let age = valueData[i].age; // 7、将相关的数据拼接到content变量中-->注意这里的是反引号不是单引号esc键下面的按键content+=`<tr><td>${id}</td><td>${name}</td><td>${age}</td></tr>`;}// 打印Content的内容console.log(content);// 8、将content变量中的内容拼接到现有的table标签中去// document.getElementById("myTable").innerHTML=content;---》错误写法这样显示出来的内容会覆盖掉原来的内容（不显示表头）// 正确的做法：先获取到table标签中的内容，然后将content变量中的内容拼接到原来的内容后面document.getElementById("myTable").innerHTML+=content;}});}
</script></html>
