一、移动互联网的架构变化
二、SringMVC中集成JSON
SpringMVC内置的JSON处理Jackson,JSONLib,GSON,阿里FastJsonspringmvc集成FastJson
Spring默认使用Jackson处理JSON数据,在实际开发中,开发者也可以选择使用其他开发框架处理JSON,接下来我们就使用业界非常受欢迎的FastJson来完成
首先在pom.xml文件中添加fastjson的依赖
<!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.66</version>
</dependency>
该解决方案的代码具有强侵入性,紧耦合,并且修改麻烦,所以在实际开发,不建议采用这种硬编码的方式来处理
2.在springmvc配置文件中配置FastJsonHttpMessageConverter
配置FastJson的消息转换器-FastJsonHttpMessageConverter,设置features属性∶指定输出时的日期转换器为WriteDateUseDateFormat
<mvc:annotation-driven>
<mvc:message-converters>
<!--FastJson的消息转换器-->
<bean id="fastJsonHttpMessageConverter" class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter">
<!--表示支持的返回的类型-->
<property name="supportedMediaTypes">
<list>
<value>text/html;charset=utf-8</value>
<value>application/json;charset=utf-8</value>
</list>
</property>
</bean>
</mvc:message-converters>
</mvc:annotation-driven>
3.控制器的使用
@Controller+@ResponseBody:@Controller和@ResponseBody结合发出来的数据就是JSON格式
@RestCnotallow= @controller+@ResponseBody
4.关于FastJSON格式化日期
直接发送的日期格式是以毫秒数发送 过来的,所以我们需要格式化,格式化有两种方式:
第一种方式
配置FastJson的消息转换器FastJsonHttpMessageConverter,设置features属性∶指定输出时的日期转换器为WriteDateUseDateFormat
格式化结果:
第二种方式
通过在实体对象种使用 @JSONField(format = “yyyy-MM-dd”)
注意点∶区别JS对象和JSON的依据,JSON格式的数据会在key上加双引号,这种方式比第一种方式整体格式化的优先级要高一些,但是你需要在你需要在每个需要格式化的地方配置
格式化结果:
三、@RequestBody接收JSON数据基础知识准备
同步请求
表单
GET
POST
http://localhost:8080/user/addUser 请求体: name=Giles&age=12
超链接:GET http://localhost:8080/user/addUser?name=Giles&age=12
异步请求
ajax----异步-------局部刷新
name=Giles&age=12
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
JSON
contentType=“application/json”
场景,如果要调用服务器端的接口,服务端要求contentType="application/json"比如极光推送
下面我们就来通过回顾之前所学的技术来实现ajax向服务端发送异步请求
1.拼接JSON串,服务端不需要@RequestBody进行接收
首先,在前台页面完成创建两个两个文本框
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>登录功能</title>
<script src="static/script/jquery-1.8.3.js"></script>
<script>
/**
* JSON数据和JS对象的区别
* JS:{name:"Giles",age:13}
* JSON:{"name":"Giles","age":13}
* 将JS对象转成JSON格式的数据:JSON.stringify()
* 将JSON格式的数据转成JS对象:JSON.parse
*/
$(function(){
$("#submit").click(function(){
$.ajax({
url:"login",
type:"POST",
data:{telephone:$("#telephone").val(),password:$("#password").val()},
success:function (data) {
},
dataType:"JSON"
});
});
})
</script>
</head>
<body>
<h2>用户登录</h2>
手机号:<input type="text" id="telephone"><br>
密码:<input type="text" id="password"><br>
<input type="button" value="登录" id="submit">
</body>
</html>
控制器代码
@Controller
public class LoginController {
private Logger logger = Logger.getLogger(this.getClass());
@Autowired
private UserService userService;
@RequestMapping(value = "/login")
public void login(@RequestParam("telephone") String telephone,
@RequestParam("password") String password,
HttpSession session,
HttpServletRequest request){
logger.info("用户名:"+telephone);
logger.info("密码:"+password);
}
}
在浏览器中打开检查元素
此时我们会发现,ajax使用默认Content-Type : application/x-www-form-urlencoded; charset=UTF-8
2.拼接JSON串,服务端需要@RequestBody进行接收
@Controller
public class LoginController {
private Logger logger = Logger.getLogger(this.getClass());
@Autowired
private UserService userService;
@RequestMapping(value = "/login")
public void login(@RequestBody User user,
HttpSession session,
HttpServletRequest request){
logger.info("用户名:"+user.getTelephone());
logger.info("密码:"+user.getPassword());
}
}
原因是我们可以从请求头中的Content-Type中可以发现前台依然是url的请求方式,但是服务端接收的时候用 @RequestBody接收的是json格式的数据,两个不匹配,所以报415的错误。解决方式的前台也要变成json格式
我们将前台页面做一个变化,给ajax请求时候添加contentType="application/json"
属性
- JSON数据和JS对象的区别
- JS:{name:“Giles”,age:13}
- JSON:{“name”:“Giles”,“age”:13}
- 将JS对象转成JSON格式的数据:JSON.stringify()
- 将JSON格式的数据转成JS对象:JSON.parse
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>登录功能</title>
<script src="static/script/jquery-1.8.3.js"></script>
<script>
/**
* JSON数据和JS对象的区别
* JS:{name:"Giles",age:13}
* JSON:{"name":"Giles","age":13}
* 将JS对象转成JSON格式的数据:JSON.stringify()
* 将JSON格式的数据转成JS对象:JSON.parse
*/
$(function(){
$("#submit").click(function(){
$.ajax({
url:"login",
type:"POST",
//转换为JSON格式
data:JSON.stringify({telephone:$("#telephone").val(),password:$("#password").val()}),
success:function (data) {
},
dataType:"JSON",
contentType:"application/json;charset=UTF-8"
});
});
})
</script>
</head>
<body>
<h2>用户登录</h2>
手机号:<input type="text" id="telephone"><br>
密码:<input type="text" id="password"><br>
<input type="button" value="登录" id="submit">
</body>
</html>
LoginController
@Controller
public class LoginController {
private Logger logger = Logger.getLogger(this.getClass());
@Autowired
private UserService userService;
@RequestMapping(value = "/login")
public void login(@RequestBody User user,
HttpSession session,
HttpServletRequest request){
logger.info("用户名:"+user.getTelephone());
logger.info("密码:"+user.getPassword());
}
}
执行结果:
为什么我们要学json,因为开发过程中我们不是一个人开发,可能会用到别人的项目,到后面项目集成的时候,人家会给你请求路径和请求的参数是什么,你请求的方式是json还是普通的方式,人家的方法返回回来,我们会给一个响应格式。而json现在是非常普遍的。比如下面我们可以参照极光推送的api。极光文档示例:https://docs.jiguang.cn/jpush/server/push/rest_api_push_schedule/
四、传json数据的注意事项
传值的时候,如果是用ajax,如果前台contentType属于“application-form-url”(普通表单形式),传普通对象即可。
但是如果是json数据,前台和后台就要做三件事:
前台:
①Content-Type: application/json; charset=UTF-8
②JSON.stringify():转化为json格式
后台:
③用@RequestBody来接收数据
前台
$("#testResultful").click(function () {
$.ajax({
url: "depts/1",
type: "PUT",
data:JSON.stringify({dname:"技术部"}),
success: function (data) {
},
contentType:"application/json;charset=utf-8",
dataType: "JSON"
});
});
@PutMapping(value = "/depts/{id}")
public ResultDto updateDept(Dept dept,@PathVariable("id") Integer id) {
logger.info("===修改部门信息==");
logger.info("获取的id为:"+id);
logger.info("获取的部门名称:"+ dept.getDname());
return null;
}
执行结果:
这里就是由于我们没用@RequestBody来接收所以得到的是null,现在我们加上@RequestBody.
@PutMapping(value = "/depts/{id}")
public ResultDto updateDept(@RequestBody Dept dept,@PathVariable("id") Integer id) {
logger.info("===修改部门信息==");
logger.info("获取的id为:"+id);
logger.info("获取的部门名称:"+ dept.getDname());
return null;
}
执行结果: