1. 概述
- 概念：JavaScript Object Notation(JavaScript 对象表示法)。JSON和JS对象的格式一样，它使用JS语法，只不过JSON字符串中的属性名必须加双引号。
- json现在多用于存储和交换文本信息的语法
- 进行数据的传输，通常用于服务端向网页传递数据
- json比XML更小，更快，更易解析
2. 语法
- 数据为键/值对,json中允许的值有字符串，数值，布尔值，null,对象，数组。
示例：
"name":"张三"
- 数据由逗号分隔。
- 大括号{}保存JSON对象。
{"name":"张三","age":23}
- 方括号[]保存数组。
示例：一个数组employees
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
- 数组中可以嵌套对象
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
- 对象中嵌套数组
- json的遍历
3.JSON对象和Java对象的相互转换
1.常见的JSON解析器
- JsonLib
- Gson
- fastjson
- jackson
这里使用jackson这个JSON解析器，一个用来序列化和反序列化 json 的 Java 的开源框架
2.JSON反序列化为Java对象
3.Java对象序列化为JSON字符串
- jackson使用步骤
1. 导入jackson的相关jar包
2. 创建jackson的核心对象ObjectMapper
3. 调用其相关方法进行转换
示例：
Student student = new Student(1, "张三", 23);
ObjectMapper objectMapper = new ObjectMapper();
String value = objectMapper.writeValueAsString(student);
System.out.println(value);
// {"id":1,"name":"张三","age":23}
4.在前端页面中将服务器端返回的json格式字符串转为json对象
var jsonObj = eval("("+xmlHttp.responseText+")");
5.案例：校验用户名是否存在
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
// 在页面加载完成后
$(function () {
// 给username绑定blur事件
// blur表示失去焦点(光标离开)执行的函数
$("#username").blur(function () {
// 获取username文本输入框的值
var username = $(this).val();
// 发送ajax请求
// 期望从服务器响应回的数据格式：
// {"userExsit":true,"msg":"此用户名太受欢迎，请更换一个"}
// {"userExsit":false,"msg":"用户名可用"}
$.get("queryUserServlet", {username:username}, function (data) {
// 现在的data为一个json对象
var span = $("#warning");
if (data.userExsit) {
// 用户名存在
span.css("color","red");
span.html(data.msg);
} else {
// 用户名不存在
span.css("color", "green");
span.html(data.msg)
}
})
})
})
</script>
</head>
<body>
<form>
<input id="username" type="text" name="username" placeholder="请输入用户名"/>
<span id="warning"></span>
<br/>
<input type="text" name="password" placeholder="请输入密码"/><br/>
<input type="submit" value="注册"/><br/>
</form>
</body>
</html>
@WebServlet(value = "/queryUserServlet")
public class queryUserServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 设置响应的数据格式为json
resp.setContentType("application/json;charset=utf-8");
// 获取用户名
String username = req.getParameter("username");
// 调用service层判断用户名是否存在
Map<String, Object> map = new HashMap<>();
if ("tom".equals(username)) {
// 存在
map.put("userExsit", true);
map.put("msg", "此用户名太受欢迎，请更换一个");
} else {
// 不存在
map.put("userExsit", false);
map.put("msg", "用户名可用");
}
// 将map转为json,并且传递给客户端
ObjectMapper objectMapper = new ObjectMapper();
objectMapper.writeValue(resp.getWriter(), map);
}
}
注意的问题：
- 服务器响应的数据，在客户端使用时，要想当作json数据格式使用，有两种方式：
1. 在客户端获取数据时，$.get()中的参数type指定为"json"
2. 在服务端设置MIME类型
response.setContentType("application/json;charset=utf-8");
4.JSON字符串与JavaScript对象的相互转化
- JSON字符串转化为JS对象：使用内置函数
JSON.parse(一个JSON格式的字符串)
var text = '{"person":['+
'{"name":"张三","age":23},'+
'{"name":"李四","age":25}'+
']}';
console.log(text);
var obj = JSON.parse(text);
console.log(obj.person[1].name);// 李四
var text1 = '["Hi", 123, true]';
var o = JSON.parse(text1);
console.log(o[2]); //true
- JS对象转为JSON字符串：使用内置函数
JSON.stringify(一个JS对象)
var object = {"name":"张三","age":23};
var str = JSON.stringify(object);
console.log(typeof(str));//string
console.log(str);//{"name":"张三","age":23}
// JSON对象在低版本的IE浏览器中不支持
// 使用eval函数将JSON字符串转为JS对象，开发中不推荐使用
var str = '{"name":"张三","age":23}';
var object = eval("(" + str +")");
console.log(object);//{name: "张三", age: 23}
console.log(object.age);//23