SpringMVC发送Json数据

矫情吗；* 2022-05-16 08:04 204阅读 0赞

### 文章目录 ###

*   *  1 导入jar包
     *  2 配置Json转换器
     *  3 前端页面
     *  4 后台代码
     *  5 效果

--------------------

\# SpringMVC发送Json数据

上一篇：[《SpringMVC接收Json数据》][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包，版本号按个人需要，[下载地址][Link 1]

## 2 配置Json转换器 ##

在SpringMVC配置文件中，配置好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>  
    
      
    <bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">  
        <property name="messageConverters">  
            <list>  
                <ref bean="mappingJackson2HttpMessageConverter" />  
            </list>  
        </property>  
    </bean>

还有一种更简单的方式：

<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>  <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 效果 ##

好了，来看一下效果！  
![这里写图片描述][70]

[SpringMVC_Json]: https://blog.csdn.net/qq_34802416/article/details/81780741
[Link 1]: http://mvnrepository.com/search?q=jackson
[70]: /images/20220516/73109e99a9cd42b688b3d86601aef58e.png