一. JSON
1 JSON概述
JavaScript对象文本表示形式（JavaScript Object Notation : js对象简写)
json是js对象
json是目前 前后端数据交互的主要格式之一
* java对象表示形式
User user = new User();
user.setUsername("后羿");
user.setAge(23);
user.setSex("男");
...
Product product = new Product();
product.setName("小米10");
product.setDesc("1亿像素的手机小王子");
* javaScript对象表示形式
let user ={"username":"后羿","age":23,"sex":"男"}
let product = {"name":"小米10","desc":"1亿像素的手机小王子"}
json可以取代XML笨重的数据结构，和xml相比：更小、更快，更易解析
json、xml作用：作为数据的载体，在网络中传输
小结：
1.json在js中是一个对象，在java中是字符串
2.作用：用来前后台数据的传输的
3.格式：
{key:value,key:value,....}
建议：json的key其实随便定义，不书写双引号也可以，值如果是字符串，在js中使用单引号双引号都可以。但是我们后期会将json的数据传递到后台服务器极java代码中，由于单引号和双引号在java中是有区别的。因此建议json的key最好使用双引号，值如果是字符串最好也使用双引号。
{"username":"锁哥","password":"1234","age":18};
2 JSON基础语法
json是一种特殊的 js 对象
#json的语法主要有两种:
1. 对象 { }
2. 数组 [ ]
1. 对象类型
{name:value,name:value,....}
2. 数组类型
[
{name:value,name:value},
{name:value,name:value},
{name:value,name:value}
]
3. 复杂对象
{
name:value,
wives:[{name:value},{},{}],
son:{name:value}
}
#注意:
1. 其中name必须是string类型
json在js中,name的双引号可以省略,建议加双引号
2. value必须是以下数据类型之一：
字符串
数字
对象（JSON 对象）
数组
布尔
Null
3. JSON 中的字符串必须用双引号包围。(单引号不行!主要是涉及到后期在后端java代码中操作)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<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,...}
说明：
1）在json中key是字符串，可以加引号，也可以不加，建议加双引号
2）在json中value是什么类型就书写什么，如果是字符串类型，一定使用双引号
3)如果定义的json是：let 对象名 = {key:value,key:value,...} 获取value值：对象名.key
4)如果定义的json是：let 数组名 = [{key1:value1,key2:value2,...},{key3:value3,key4:value4,...}]
获取value4值：数组名[1].key4 === 1表示数组索引1的位置
5)如果定义的json是：let 对象名 = {key:value,key2:[key:value,key1:value1,...],key:value,...}
获取value1值：对象名.key2[1].key1
*/
//1.定义格式：{key:value,key:value,...}
let oJson = {"username":"锁哥","age":18,"sex":"男"};
//需求：获取18
console.log(oJson.age);//18
/*
2.定义格式 2：
[{key:value,key:value,...},{key:value,key:value,...}，{key:value,key:value,...},...]
*/
let a1 = [{"username": "锁哥", "age": 18, "sex": "男"}, {"username": "柳岩", "age": 19, "sex": "女"}];
//需求：获取柳岩
//a1[1] 获取的是{"username": "柳岩", "age": 19, "sex": "女"}，是一个对象，是对象就可以使用 对象.key 获取value
console.log(a1[1].username);//柳岩
/*
3.定义格式 3：
{key:value,key:[{},{},...],key:value,...}
*/
let oJson2={"company":"黑马程序员","persons":[{"username":"锁哥","age":18},{"username":"坡坡","age":28}]};
//获取坡坡
console.log(oJson2.persons[1].username);//对象.key获取value，数组就遍历取出每个对象
</script>
</body>
</html>
补充：
二. ajax和json综合
2.1 响应数据是json格式
需求：向后台发送请求，获取好友列表并显示到页面中
【1】html页面
<!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 type="text/javascript" src="js/axios-0.18.0.js"></script>
<script type="text/javascript">
/*
需求：向后台发送请求，获取好友列表并显示到页面中
说明：后台的url地址： "http://localhost:8080/axiosJsonDemo01Servlet"
*/
function method01() {
//向后台发送请求
axios.post("http://localhost:8080/axiosJsonDemo01Servlet")
.then(resp => {
//1.接收后端响应的Result对象
let obj = resp.data;
console.log(obj);
//2.判断是否成功
if (obj.flag) {
//查询成功
document.getElementById('messageDiv').innerHTML = obj.message;
//取出数组
let arr = obj.valueData;
//遍历数组取出每个json对象
//定义变量保存每个对象的数据的tr内容
let content = "";
for (let friend of arr) {//friend 表示每个json对象===={age: 18, id: '001', name: '张三'}
//这里书写是+= 累加
content += `
<tr>
<td>${friend.id}</td>
<td>${friend.name}</td>
<td>${friend.age}</td>
</tr>
`
}
//3.获取table标签对象
let oTable = document.getElementById('myTable');
//4.将获取的数据即content放到table标签的文本中 appendChild
oTable.innerHTML += content;//这里使用+=,这样就不会覆盖原来的表头tr
} else {
//查询失败
document.getElementById('messageDiv').innerHTML = obj.message;
}
});
}
</script>
</html>
【2】后端代码
package com.itheima.sh.b_json_02;
import com.alibaba.fastjson.JSON;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Collections;
@WebServlet("/axiosJsonDemo01Servlet")
public class AxiosJsonDemo01Servlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
response.setContentType("text/html;charset=utf-8");
// 需求：查询当前用户的好友 List<Friend> list,转成json格式字符串,最后响应
//1.创建集合对象保存多个好友
ArrayList<Friend> list = new ArrayList<>();
//2.向集合添加数据
Collections.addAll(list, new Friend("001", "张三", 18), new Friend("002", "李四", 19),
new Friend("003", "王五", 20));
//3.创建Result类的对象
/*
true : 表示查询成功
"查询好友列表成功" 查询好友成功的信息
list:存放好友的集合数据
*/
Result result = new Result(true, "查询好友列表成功", list);
// int i = 1/0;
//5.使用fastjson中的JSON类的方法String toJsonString(Object obj)
String s = JSON.toJSONString(result);
//5.响应给前端
response.getWriter().print(s);
} catch (Exception e) {
e.printStackTrace();
//告知浏览器查询好友列表失败
/*
false : 表示查询失败
"查询好友列表成功" 查询好友成功的信息
list:存放好友的集合数据
*/
Result result = new Result(false, "查询好友列表失败");
//5.使用fastjson中的JSON类的方法String toJsonString(Object obj)
String s = JSON.toJSONString(result);
//5.响应给前端
response.getWriter().print(s);
}
}
}
![[Mysql] 的基础知识和sql 语句.教你速成(下)——数据库的约束篇](https://i-blog.csdnimg.cn/direct/c903078171174695b3337442bf64bafc.png)
