Appearance
JSON
JSON的格式介绍
response.setContentType("text/html; charset=utf-8");服务器发送给浏览器
response.setContentTypetext/htmltext/plainapplication/xmltext/xmlapplication/jsonajax参数:
type: "text"如果前端
ajax-type参数是纯文本的话，解析出来的result就是js的string格式javascriptuser: { username: "zhangsan" }如果在前端想要知道user的username的话，因为type为text，所以result为xString，那么想要拿到用户名的话，需要自己进行字符截取
可以把ajax-type参数设置为json，那么jquery-ajax会自动地将这个纯文本转换成json对象
所以使用时比较方便:
user.username
浏览器发送给服务器
localhost:8080/s?key=value&key=valueapplication/x-www-form-urlencodekey=value&key=value在服务器内部 request.getParameter
xml
xml
<... version=1.0>
<!-- xml的数据表现力是比较强的 -->
<!-- 数据是比较冗余的 -->
<root>
<name id="..." name="...">zhangsan</name>
</root>- json
json
{"name": "zhangsan", "gender": "male"}json
["zhangsan", "lisi", "abc"]常见的网络传输使用的数据格式
Content-Type: application/x-www-form-urlencodetex一般会在请求体当中出现(浏览器发送给服务器的) username=future-weaver&password=123456xml
一般会在响应体当中出现(服务器发送给浏览器的) xml表现力比较强，具备标签属性、标签内容的能力 <xml charset=utf-8> <username prop="red"> zhangsan </username>json
一般在响应体当中出现(服务器发送给浏览器的) json表现力相对于xml较弱，但是比较轻量，适合在网络上传输 {username: zhangsan}
JSON数据及格式
【目标】
tex
1、了解什么是JSON数据，及其作用；
2、掌握JSON数据的3种格式；【讲解】
【1】JSON数据及作用
html
JSON(JavaScript Object Notation, JS对象标记) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。【2】JSON数据的3种格式
Map<String, Object>
var user = {id: 1, name: "张三", gender: "m", address: ["shanghai", "shanghai", "hangtou"]}
user.id
user.gender
List<Object>
[1, 2, 3, "shanghai"]
| 类型 | 语法 | 解释 |
|---|---|---|
| 对象类型 | {键: 值, 键: 值} | 代表一个对象，有多个属性名和值取值: 对象名.键键是字符串的类型，值是任意类型 |
| 数组/集合类型 | [值1, 值2, 值3] | 一个数组对象，里面每个元素可以是任意类型 |
| 混合类型 | [{键: 值}， {键: 值}, {键: 值}]{键: [值, 值, 值]} | 1. 数组中每个元素是一个对象 2. 是一个对象，某个属性值是一个数组 |
【小结】
tex
1、JSON：是一种轻量级的数据交换格式；
2、JSON数据作用：网络数据传输；
3、JSON数据的3种语法：
对象类型： {键:值,键:值} 代表一个对象，有多个属性名和值
数组/集合类型： [值1，值2，值3] 代表一个数组对象，里面的元素可以是任意类型
混合类型： [{键:值,键:值}, {键:值,键:值}]或{键:[值，值，值]} 代表数组中每个元素都是对象，一个对象某个属性值是一个数组JSON数据前端解析
【1】解析JSON对象类型
目标
- 使用 JS 解析 JSON 对象，获取其中的属性值
步骤
1、创建一个 person 对象的 JSON 对象，属性名：firstname、lastname、age 给三个属性赋值 2、获取 person 对象中的 firstname，lastname 和 age 属性的值，并打印；
实现
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>json格式</title>
</head>
<body>
<script type="text/javascript">
// 创建一个person对象的JSON对象，属性名：firstname、lastname、age给三个属性赋值
var person = {
firstname: "悟空",
lastname: "孙",
age: 26
};
//输出数据
document.write("姓：" + person.lastname + "，名：" + person.firstname + "，年龄：" + person.age + "<br/>");
</script>
</body>
</html>【2】解析JSON数组类型
目标
- 使用 JS 解析 JSON 数组
步骤
- 创建这种格式的：[value1, value2, value3]
- 创建一个数组，其中的 value 可以设置成任意类型的数据；
- 遍历数组，输出其中的每一个值；
实现
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
//JSON数组格式
var arr = ['hello', 1, true];
//解析数据
for (var i = 0; i < arr.length; i++) {
var obj = arr[i];
document.write(obj+" ");
}
</script>
</html>【3】解析JSON混合类型
目标
- 解析 JSON 混合类型
步骤
html
1、分别创建JSON的混合类型：
[{键:值},{键:值},{键:值},{键:值}]
{键:[值，值，值]}
2、解析数据：
3、打印数据；实现
解析：[{键:值},{键:值},{键:值},{键:值}]
javascript
<script type="text/javascript">
//1. 创建一个数组，包含三个JSON对象
var arr = [{
firstname: "悟空",
lastname: "孙",
age: 26
}, {
firstname: "八戒",
lastname: "猪",
age: 24
}, {
firstname: "吴京",
lastname: "沙",
age: 22
}];
//2. 每个JSON对象都有三个属性：firstname、lastname、age。给每个对象的属性赋不同的值
for (var person of arr) {
//3. 遍历输出每个JSON对象的属性值
document.write("姓：" + person.lastname + "，名：" + person.firstname + "，年龄：" + person.age + "<br/>");
}
</script>
解析：{键:[值，值，值]}
javascript
<script type="text/javascript">
//一个JSON对象，有一个baobao属性，属性值是一个数组
var person = {
baobao: ["悟空","八戒","沙僧"]
};
//取对象中babao属性
var baobao = person.baobao;
//遍历数组
for (var p of baobao) {
document.write(p+" ");
}
</script>
小结
Mapperson = {name: "张三", gender: "m"}
person.name;Listpeople = ["张三", ...]
people[0];
JSON转换工具
JSON转换工具介绍
目标
- 了解 JSON 转换工具的作用；
- 了解常用的 JSON 转换工具；
- 掌握 jackson 把 Java 对象转换成 JSON 字符串的 API；
讲解
- JSON 转换工具的作用
JSON的转换工具是通过Java封装好的一些jar工具包，直接将Java对象或集合转换成JSON格式的字符串。
- 常用的 JSON 转换工具；
| 工具名称 | 介绍 |
|---|---|
| Jsonlib | Java类库，需要导入的jar包较多 |
| Gson | Google提供的一个简单的json转换工具 |
| Fastjson | Alibaba技术团队提供的一个高性能的json转换工具 |
| Jackson | 开源免费的json转换工具，SpringMVC转换默认使用jackson |
- Jackson 把 Java 对象转换成 JSON 字符串的 API；
| 方法名 | 作用 |
|---|---|
new ObjectMapper() | 创建ObjectMapper对象 |
String writeValueAsString(Object obj) | 把对象转换为JSON字符串 |
T readValue(String content, Class<T> valueType) | 把JSON字符串转换成对象 |
@JsonIgnore注解【了解】 | 转换时，@JsonIgnore所标注的属性不参与转换 |
对象转换成 json 字符串
javaCheckEmailResponse result = ...; ObjectMapper mapper = new ObjectMapper(); String jsonString = mapper.writeValueAsString(result);json 字符串转换成对象
javaObjectMapper mapper = new ObjectMapper(); CheckEmailResult result = mapper.readValue("{...}", CheckEmailResult.class);
Jackson应用
目标
- 使用 Jackson 把 Java 对象转换成 JSON 字符串
步骤
导入下面的三个 jar 包，复制到 WEB-INF\lib 目录下
jackson-annotations-2.9.0.jarjackson-core-2.9.9.jarjackson-databind-2.9.9.jar
创建一个 User 类：包含 id，username，age 三个属性
在 main 函数中，实例化 User 对象，给属性赋值
创建一个字符串数组对象，包含三个字符串
创建一个
List<User>，包含三个用户对象创建一个
Map对象，键名为：user，键为 User 对象实例化 ObjectMapper 对象，调用 writeValueAsString()方法输出转换后的字符串对象
实现
- User.java
java
package com.futureweaver.entity;
public class User {
private int id;
private String username;
private int age;
public User(int id, String username, int age) {
this.id = id;
this.username = username;
this.age = age;
}
@Override
public String toString() {
return "User{" +
"id=" + id +
", username='" + username + '\'' +
", age=" + age +
'}';
}
public User() {
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
}- JacksonTest.java
java
package com.heima.json;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.heima.bean.User;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class JacksonTest {
public static void main(String[] args) throws JsonProcessingException {
//创建User对象
User user = new User(100,"张三", 25);
//创建对象
ObjectMapper mapper = new ObjectMapper();
//调用方法
String userJson = mapper.writeValueAsString(user);
System.out.println("userJson = " + userJson);
//创建一个字符串的数组
String[] names = {"张三","李四","王五"};
String arrJson = mapper.writeValueAsString(names);
System.out.println("arrJson = " + arrJson);
//创建一个List集合
List<User> users = new ArrayList<>();
users.add(new User(1,"孙悟空", 25));
users.add(new User(2,"猪八戒", 23));
users.add(new User(3,"白骨精", 20));
String usersJson = mapper.writeValueAsString(users);
System.out.println("usersJson = " + usersJson);
//创建一个Map对象
Map<String, User> map = new HashMap<>();
map.put("user", new User(1,"孙悟空", 25));
String mapJson = mapper.writeValueAsString(map);
System.out.println("mapJson = " + mapJson);
}
}
小结
- 新建 ObjectMapper 对象->mapper
- String mapper.writeValueAsString(Object javabean);
- T readValue("json 字符串", T<类名.class>)
@JsonIgnore
不参与转换(不管是从字符串转换到对象也好，还是从对象转换到字符串也好，都不参与)
综合案例
新增通讯录页面email校验
【需求】
- 对添加通讯录页面中的 email 进行异步校验；
- email 存在，给出"无法注册，请重试"的提示信息；
- email 不存在，给出绿色"可以注册"的提示信息；
【JSP 页面】add.jsp
html
<script>
//给姓名添加异步校验
//事件：blur
$(function() {
// 当HTML全部准备好之后
// 绑定email的离焦事件
$("#email").blur(function() {
// 把email的值，提交给Servlet，由Servlet进行判断
var value = this.value;
$.post({
url: "check_email",
data: {email: value},
dataType: "json",
success: function(result) {
// 当Servlet响应时，result就是响应
$("#checkMsg").text(result.msg);
}
});
});
});
</script>- CheckEmailServlet.java
java
package com.futureweaver.web;
import com.fasterxml.jackson.databind.ObjectMapper;
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.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;
// 检查Email是否已经存在
@WebServlet("/check_email")
public class CheckEmailServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 设置编码
request.setCharacterEncoding("utf-8");
response.setContentType("application/json; charset=utf-8");
// 接收数据
// 获取参数
String email = request.getParameter("email");
// 字符输出流
PrintWriter out = response.getWriter();
// 新建一个响应的对象
Map<String, Object> result = new HashMap<>();
// 处理数据
if ("future-weaver@future-weaver.com".equals(email)) {
// 无法注册，请重试
// 响应数据
result.put("msg", "无法注册，请重试");
} else {
// 可以注册
// 响应数据
result.put("msg", "可以注册");
}
// 将对象转换成JSONString
ObjectMapper mapper = new ObjectMapper();
String jsonString = mapper.writeValueAsString(result);
out.write(jsonString);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}学习目标总结
- 能够掌握 json 的三种数据格式
- 能够使用 json 转换工具 Jackson 进行 json 格式字符串的转换
- 了解 Servlet 响应 Content-Type 指定为 json 格式