JSON及axios应用 - IT评测·应用市场-qidao123.com

<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>

复制代码

<!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>
<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>

复制代码