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>