SpringMVC 中使用 json 进行前后端数据交互的方法
本文旨在总结在 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>
