本文旨在总结在 SpringMVC 中使用 json 进行前后端数据交换的方法。
前端到后端数据的传输
首先传入依赖
<!-- Jackson Json处理工具包 -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>${jackson.version}</version>
</dependency>
我们的前端代码如下:
从代码中可见,前端使用了 jquery 中的 ajax 技术进行 json 数据的传输,将{name:“张三”,age:“12”}传输到了后端。
在后端,我们的代码如下
在使用 SpringMVC 框架的前提下,我们可以直接使用参数来接收传入的 json 字符串
查看控制台,发现确实接收到了前端传入的数据
后端到前端数据的传输
后端到前端数据的传输方法较多,我使用的是 ajax 的回调函数。
若使用 ajax 成功将数据传入后端,便会执行 success 函数,data 为后端向前端传输的 json 字符串。也许你会问,哎呀,后端啥时候向前端传输过 json 数据了?莫急,且往下看。
可见,我们向前端返回的是一个 map,那它又是如何变成 json 字符串的呢?其实,不知你发现没有,我们上面使用了一个注解,@ResponseBody。看到这里,相信大家都明白了,实际上 @ResponseBody 这个注解有将 Controller 类方法返回的对象转换为 json 并响应给前端的功能,于是,我们的 map 便顺理成章地成了 json。
前端显示如下,证明数据真正从后端传到了前端。
对于在 SpringMVC 中使用 json 进行前后端数据交互的方法就总结到这里,希望能够真正帮助到各位,若本文有错也请各位在评论中指出,感谢。
最后附上完整代码
后端:
package exchange.controller;
import java.util.HashMap;
import java.util.Map;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class MVCController {
private final static Logger logger = LoggerFactory.getLogger(MVCController.class);
@ResponseBody
@RequestMapping("testJson")
public Map<String, String> testJson(String name,String age) {
Map<String, String> map = new HashMap<String, String>();
logger.info("从前端接收到json数据:name=" + name);
logger.info("从前端接收到json数据:age=" + age);
map.put("name", name);
map.put("age",age);
return map;
}
}
前端:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
从后台接收的name:<p id="p1"></p>
从后台接收的age:<p id="p2"></p>
</body>
<script>
$(document).ready(function(){
$.ajax({
type: "POST",
url:"../testJson",
data:{name:"张三",age:"12"},
async: true,
error: function(request) {
alert("上传数据出错!");
},
success: function(data) {
$("#p1")[0].innerHTML = data.name;
$("#p2")[0].innerHTML = data.age;
}
});
});
</script>
</html>