JSON及axios应用
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,...}
*/
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.name);
}
console.log(addr.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.id;
let name = valueData.name;
let age = valueData.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>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]