版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34802416/article/details/81783280
目录
文章目录
# SpringMVC发送Json数据
接上一篇，这一篇来继续把前后端利用Json实现数据交互补充完。本文介绍如何将数据从后端发送到前端，并填充到table中进行显示。
1 导入jar包
jackson-databind-2.9.6.jar
jackson-core-2.9.6.jar
jackson-annotations-2.9.6.jar
需要导入如上jar包，版本号按个人需要，下载地址
2 配置Json转换器
在SpringMVC配置文件中，配置好Json转换器，共有两种方式：
<!-- Json转换器 -->
<bean id="mappingJackson2HttpMessageConverter"
class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<value>text/html;charset=UTF-8</value>
</list>
</property>
</bean>
<!-- 启动Spring MVC的注解功能，完成请求和注解POJO的映射 -->
<bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
<property name="messageConverters">
<list>
<ref bean="mappingJackson2HttpMessageConverter" /><!-- json转换器 -->
</list>
</property>
</bean>
还有一种更简单的方式：
<!-- 支持mvc注解驱动 -->
<mvc:annotation-driven enable-matrix-variables="true" />
如果配置了mvc注解驱动，则不需要再单独配置Json转换器，推荐这种方式。
接下来就可以开始前后端页面的代码编写了。
3 前端页面
前端页面点击按钮向服务器发出请求，服务器返回一条Json数据文本；
前端页面通过js将数据解析后，填充到table标签中进行显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<!-- 引用JQuery文件 -->
<script src="js/JQuery3.3.1.js"></script>
</head>
<body>
<input type="button" onclick="ajaxJson()" value="recive Json"></input>
<hr/>
<table width="40%" border="1px" cellspacing="0">
<tr>
<td>id</td>
<td>name</td>
<td>password</td>
</tr>
<tbody id="content">
</tbody>
</table>
</body>
<script type="text/javascript">
function ajaxJson(){
//使用$.ajax()请求数据
$.ajax({
type:"post",
url:"ajax/json",
success:function(data){
var html="";
for(var i = 0; i < data.length; i++){
html += "<tr>"+
"<td>"+data[i].id+"</td>"+
"<td>"+data[i].name+"</td>"+
"<td>"+data[i].password+"</td>"+
"</tr>";
}
$("#content").html(html);
}
});
//使用$.post()请求数据
//$.post("ajax/json",function(data){
// var html="";
// for(var i = 0; i < data.length; i++){
// html += "<tr>"+
// "<td>"+data[i].id+"</td>"+
// "<td>"+data[i].name+"</td>"+
// "<td>"+data[i].password+"</td>"+
// "</tr>";
// }
// $("#content").html(html);
//});
}
</script>
</html>
4 后台代码
后台返回一个pojo类User对象的List给前端。
package com.rhine.studySSM.controller;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.rhine.studySSM.domain.User;
@Controller
@RequestMapping("/ajax")
public class AjaxController {
@RequestMapping("/json")
@ResponseBody
public List<User> json(){
List<User> userList = new ArrayList<User>();
userList.add(new User(1, "jack","jack123"));
userList.add(new User(2, "lily","lily123"));
userList.add(new User(3, "rhine","rhine123"));
return userList;
}
}
5 效果
好了，来看一下效果！
