JSON数据交互接收请求数据响应数据入门案例
1 概述
@RequestBody:将json、xml 等内容 转换 成Java对象。
@ResponseBody:将Java对象 转换 成 json、xml等内容。
2 前端发送ajax请求,都断获取json数据
【前端发送ajax请求,后端通过VO自动获取数据打印】
前端代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
<script>
$(function () {
var url = "${pageContext.request.contextPath}/tJson.action";
var params={
"name":"zhangsan",
"price":"123"
}
var callBack=function (rel) {
//后端有返回结果 就会弹窗显示, 没有就不会弹窗
alert(rel.name+" "+rel.price)
}
//发射
$.post(url,params,callBack,"json")
})
</script>
</head>
<body>
页面加载完毕就发射ajax
</body>
</html>
后端代码
Qvo
public class QVo {
private String name;
private Double price;
....空参/有参/get/set/toString
}
Controller
Controller
@RequestMapping("/tJson.action")
public String testJson(QVo qvo){
//查看前端传递的json 自动转化的VO结果
System.out.println(qvo);
return "/book.jsp";//随便转发到一个页面,不影响测试结果.
}
3 后端给前端响应Json数据
需求:
跟上一个例子类似, 前端发送请求给后端, 后端接收数据后给前端再相应回一个json数据.
该例子中,需要直接把java对象通过SpringMvc自动转化成json数据. 需要使用两个东西完成.
-
导入Jackson-databind坐标
-
在方法的返回值上使用@ResponseBody注解.
Pom文件坐标
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.7</version>
</dependency>
Controller
@RequestMapping("tj.action")
public @ResponseBody QVo getInfo(String name,Double price){
System.out.println("接收到前端数据:"+name+" "+price);
//创建一个对象, 通过SpringMvc自动把这个对象转化成Json响应给前端
QVo qVo = new QVo("lisiguang", 220.4);
return qVo;
}
[@ResponseBody 需要添加这个注解,才会自动转化成json]
前端
<script src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
<script>
$(function () {
var url = "${pageContext.request.contextPath}/tj.action";
var params={
"name":"zhangsan",
"price":"123"
}
var callBack=function (rel) {
//后端有返回结果 就会弹窗显示, 没有就不会弹窗
alert(rel.name+" "+rel.price)
}
//发射
$.post(url,params,callBack,"json")
})
</script>
测试结果
后端
前端