背景

Web 1.0 时代

早期网站,登录,如果失败,需要刷新页面,才能重新登录;不点击提交按钮,就不知道自己密码输错了

现在大多数的网站,都是局部刷新,不刷新整个页面的情况下,实现页面更新

注册的时候,发现手机号已经注册过了,但是你只是输入了,没有提交,然后他就提示了手机号已存在

Web 2.0 时代

最重要的一个因素就是Ajax

JSON

JSON是一种轻量级的数据交换格式,目前使用极其广泛

在JS语言中,一切都是对象,因此,任何JS支持的类型都可以通过JSON来表示,例如字符串,数字,对象,数组等。语法格式要求:

  • 对象表示为键值对
  • 数据由逗号分隔
  • 花括号保存对象
  • 方括号保存数组
1
2
3
{"name":"QinJiang"}
{"age":"3"}
{"sex":"男"}

JSON是JS对象的字符串表示法,它使用文本表示一个JS对象的信息,本质是一个字符串

1
2
var obj = {a:'hello',b:'world'};  //这是一个对象
var json = '{a:'hello',b:'world'}'; //这是JSON字符串

JSON和JS互转

实现JSON转JS对象,使用JSON.parse()方法

1
var obj = JSON.parse('{a:'hello',b:'world'}') ;

运行结果
1
{a:'hello',b:'world'}

实现JS对象转JSON,使用JSON。stringify()方法

1
var json = JSON.stringify({a:'hello',b:'world'});

JSON1.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

<script type="text/javascript">
//编写一个对象
var user = {
name:"s1nd0re1",
age:21,
sex:"男"
};
//输出这个对象
console.log(user);
//将js对象转换成json对象
var json = JSON.stringify(user);
//输出这个json字符串
console.log(json);

var obj = JSON.parse(json);

console.log(obj)
</script>

</body>
</html>

演示

创建一个web application项目
创建springmvc的配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx"
xmlns:p="http://www.springframework.org/schema/p" xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">

<context:component-scan base-package="com.ceit.controller" />
<mvc:default-servlet-handler />
<mvc:annotation-driven />

<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" id="internalResourceViewResolver">
<property name="prefix" value="/WEB-INF/jsp/" />
<property name="suffix" value=".jsp" />
</bean>

</beans>

创建User实体类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
package com.ceit.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;

@Data
@Accessors(chain = true)
@AllArgsConstructor
@NoArgsConstructor
public class User {
private String name;
private int age;
private String sex;
}

编写控制器 UserController

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
package com.ceit.controller;

import com.ceit.pojo.User;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class UserController {
@RequestMapping("/json1")
//我们正常返回会走视图解析器,而jso返回的是一个字符串
//市面上有很多的第三方jar包可以实现这个功能,jackson 只需要一个简单的注解就可以实现了
@ResponseBody //将服务器端返回的对象转换为json对象响应回去
public String json1() throws JsonProcessingException {
//需要一个jackson的对象映射器,就是一个类,使用它可以直接将对象转换为json字符串
ObjectMapper objectMapper = new ObjectMapper();
// 创建一个对象
User user = new User("51nd0re1",21,"男");
System.out.println(user);
//将Java对象转换为json字符串
String str = objectMapper.writeValueAsString(user);
System.out.println(str);

return str; //由于使用了@ResponseBody 这里会将str以json格式的字符串返回,十分方便
}
}

访问/json1就可以了 但是由于编码问题前端会出现乱码
可以在@RequestMapping添加produces

最方便的就是修改配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<mvc:annotation-driven>
<mvc:message-converters register-defaults="true">
<bean class="org.springframework.http.converter.StringHttpMessageConverter">
<constructor-arg value="UTF-8"/>
</bean>
<bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
<property name="objectMapper">
<bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">
<property name="failOnEmptyBeans" value="false"/>
</bean>
</property>
</bean>
</mvc:message-converters>
</mvc:annotation-driven>

就可以修改成默认utf-8

UserController.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
package com.ceit.controller;

import com.ceit.pojo.User;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class UserController {
@RequestMapping(value = "/json2")
@ResponseBody
public String json2() throws JsonProcessingException {
User user = new User("51nd0re1", 21, "男");
return new ObjectMapper().writeValueAsString(user);
}

}

运行结果
1
{"name":"51nd0re1","age":21,"sex":"男"}

还可以用来显示时间 返回的是时间戳的格式:1615286246602

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
package com.ceit.controller;

import com.ceit.pojo.User;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.Date;

@Controller
public class UserController {
@RequestMapping(value = "/time1")
@ResponseBody
public String json3() throws JsonProcessingException {
Date date = new Date();
return new ObjectMapper().writeValueAsString(date);
}

}

这样显示时间很不方便
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
package com.ceit.controller;

import com.ceit.pojo.User;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.SerializationFeature;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;

@Controller
public class UserController {
@RequestMapping(value = "/time2")
@ResponseBody
public String json5() throws JsonProcessingException {
ObjectMapper mapper = new ObjectMapper();

//1.如何让他不返回时间戳:关闭时间戳功能
mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS,false);
//2.时间格式化问题
SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
//3.让mapper指定时间日期格式为simpleDateFormat
mapper.setDateFormat(simpleDateFormat);
//4.写一个日期对象
Date date = new Date();
return mapper.writeValueAsString(date);

}

}

运行结果
1
"2021-03-09 18:45:10"

封装成工具类

发现问题,重复代码太多,给它编写一个工具类JsonUtils

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
package com.ceit.utils;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.SerializationFeature;

import java.text.SimpleDateFormat;

public class JsonUtils {

public static String getJson(Object object){
return getJson(object,"yyyy-MM-dd HH:mm:ss");
}

public static String getJson(Object object,String dateFormat){
ObjectMapper mapper = new ObjectMapper();
//1.如何让他不返回时间戳:关闭时间戳功能
mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS,false);
//2.时间格式化问题
SimpleDateFormat simpleDateFormat = new SimpleDateFormat(dateFormat);
//3.让mapper指定时间日期格式为simpleDateFormat
mapper.setDateFormat(simpleDateFormat);

try {
return mapper.writeValueAsString(object);
} catch (JsonProcessingException e) {
e.printStackTrace();
}
return null;
}
}

再修改Controller
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
package com.ceit.controller;

import com.ceit.pojo.User;
import com.ceit.utils.JsonUtils;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.SerializationFeature;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;

@Controller
public class UserController {
@RequestMapping(value = "/time3")
@ResponseBody
public String json6() throws JsonProcessingException {

Date date = new Date();
return JsonUtils.getJson(date);

}

}

这样代码就非常简洁美观了
运行结果
1
"2021-03-09 18:55:37"

源码下载