SpringMVC 数据交互(Json)

SpringMVC 数据交互(Json) [ 资源分享技术杂谈 ]

九叶的小窝文章正文

九叶

{{nature("2020-12-26 16:31:55")}}更新

**交互图**

从这个图中我们可以看出来，前台请求的数据如果是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，如下图：

[button color="dark" icon="glyphicon glyphicon-download-alt" url="https://old.qwq.ro/usr/uploads/2020/12/3635347615.zip" type=""]相关jar包下载[/button]

2. Controller编写

    @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 color="dark" icon="glyphicon glyphicon-download-alt" url="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js" type=""]Jquery-1.8.0.js[/button]

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

<%--
  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>

点击页面按钮测试成功