JSON及axios应用

来自云龙湖轮廓分明的月亮 · 2025-3-10 16:53:57

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

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

JSON及axios应用

0 个回复

快速回复

楼主热帖

标签云