SpringMVC 数据交互(Json)

Author： JiuyeXD
发布时间：December 25, 2020
640 views
No comments
3056 words
Categories：资源分享技术杂谈

![**交互图**](https://old.qwq.ro/usr/uploads/2020/12/368631202.png)

**从这个图中我们可以看出来，前台请求的数据如果是json字符串，我们需要用@RequestBody先将json字符串转成java对象，然后前台传输的是java对象的时候就需要用@ResponseBody将我们的java对象，转成json格式的字符串，这样页面才可以解析**

### 一、@RequestBody

**作用：**
@RequestBody注解用于读取http请求的内容(字符串)，通过springmvc提供的HttpMessageConverter接口将读到的内容（json数据）转换为java对象并绑定到Controller方法的参数上。

传统 Key/Value 的请求参数：

```
pid=1&pname=玩具&price=70
```

现在的请求参数：使用POST请求，在请求体里面加入json数据

```
{
    "pid":1,
    "pname":"玩具",
    "price":70
}
```

本例子应用：

@RequestBody注解实现接收http请求的json数据，将json数据转换为java对象进行绑定。

### 二、@ResponseBody

作用：

@ResponseBody注解用于将Controller的方法返回的对象，通过springmvc提供的HttpMessageConverter接口转换为指定格式的数据如：json,xml等，通过Response响应给客户端。

本例子应用：

@ResponseBody注解实现将Controller方法返回java对象转换为json响应给客户端。

### 三、请求，响应json实现

**1. 加入jar包**

如果需要springMVC支持json，必须加入json的处理jar

我们使用Jackson这个jar，如下图：

![image.png](https://old.qwq.ro/usr/uploads/2020/12/800597733.png)

<button class="btn m-b-xs btn-dark btn-addon" onclick='window.open("https://old.qwq.ro/usr/uploads/2020/12/3635347615.zip","_blank")'><i class="glyphicon glyphicon-download-alt"></i>相关jar包下载</button>

**2. Controller编写**

```java
    @RequestMapping(value = "keyvalue")
    @ResponseBody
    public Product JsonKeyValue(Product product){
        return product;
    }

@RequestMapping(value="test_json")
    @ResponseBody
    public Product test_json(@RequestBody Product product){
        return product;
    }
```

**3. 编写ajax测试**

引入jquery文件

<button class="btn m-b-xs btn-dark btn-addon" onclick='window.open("http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js","_blank")'><i class="glyphicon glyphicon-download-alt"></i>Jquery-1.8.0.js</button>

![image.png](https://old.qwq.ro/usr/uploads/2020/12/2410579278.png)

前台页面用（jquery实现）点击一个按钮，发起一个ajax请求，传输json数据到后台：

```html
<%--
  Created by IntelliJ IDEA.
  User: JiuyeXD
  Date: 2020/12/25
  Time: 20:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-1.8.0.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#json").click(function() {
                $.ajax({//ajax请求
                    type : 'post',//请求方法
                    url : 'test_json',//请求路径
                    contentType:"application/json;charset=UTF-8",//指定传送json格式数据，并指定编码
                    data : '{"pid":1,"pname":"玩具","price":70}',//json格式数据
                    success : function(data) {//回调函数
                        alert("pid: "+data.pid+", pname: "+data.pname+", price: "+data.price);
                    }
                });
            });
        });

$(document).ready(function() {
            var product='pid=1&pname=玩具&price=70';
            $("#keyvalue").click(function() {
                $.ajax({//ajax请求
                    type : 'post',//请求方法
                    url : 'keyvalue',//请求路径
                    data : product,//json格式数据
                    success : function(data) {//回调函数
                        alert("pid: "+data.pid+", pname: "+data.pname+", price: "+data.price);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <button id="json" type="button">Json</button>
    <button id="keyvalue" type="button">Key&Value</button>
</body>
</html>
```

点击页面按钮测试成功

![image.png](https://old.qwq.ro/usr/uploads/2020/12/3044192390.png)

Last modification：December 26, 2020