简单介绍：

之前我们介绍了有关复杂数据类型绑定的问题,只不过是将数据类型变成了数组,集合以及类里嵌套复杂数据类型. 除了这些基本操作之外,我们还需要学会处理json文件类型的数据.json文件是前端常用的数据存放文件,比起XML json解析速度更快,文件更小,所以在前端的使用率非常高,我们要学会使用一个Spring自带的一个jackson来将请求参数转换成Java类,并绑定在控制器方法的形参上,在Spring中,我们需要使用一个特殊的注解来将请求的json参数转换成Java类

使用方法：

首先,我们需要引入转换类所在的依赖坐标,并且为了更方便的发送请求,我们还需要使用jQuery来发送ajax异步请求所以我们还需要引入jQuery文件.

在我们需要使用到的依赖引入完毕之后，我们需要接收来自浏览器页面的参数，所以我们需要在浏览器中编写一个表单这个表单需要使用ajax来发送异步通信请求，将数据转化成JSON格式发送到控制器方法中而在控制器方法中，我们需要解析这种格式的数据并将其绑定到Java类中，最后在控制台输出

代码实现：

Java代码：

package SpringMVC.JSON_data_binding;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.List;

@Controller
public class jsonBinging {
    @RequestMapping("/jsonBingPro")
//    这个注解的作用是解析Json文件中的数据,并将其绑定到形参中的java中方便我们的操作
    public String jsonBingPro(@RequestBody product p){
        System.out.println(p.toString());
        return "index";
    }
    @RequestMapping("/jsonBingPros")
    public String jsonBingPros(@RequestBody List<product> products){
        for(product p :products){
            System.out.println(p.toString());
        }
        return "index";
    }
}

HTML代码：

<%--
  Created by IntelliJ IDEA.
  User: 33680
  Date: 2023/3/27
  Time: 15:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Json数据类型的绑定</title>
    <script src="../../js/jquery-3.6.4.min.js"></script>
</head>
<body>
    <form>
        商品1编号: <input id="proId" type="text"><br/>
        商品1名字: <input id="proName" type="text"><br/>
        <button type="submit" onclick="sumbmitProduct()">提交单个商品</button>
        <hr>
        商品2编号: <input id="proId2" type="text"><br/>
        商品2名字: <input id="proName2" type="text"><br/>
        <button type="submit" onclick="sumbmitProducts()">提交全部商品</button>
    </form>
    <script type="text/javascript">
        function sumbmitProduct(){
            // 将原生DOM转换成可以被Jquery操作的Jquery对象
            var proId = $('#proId').val();
            var proName = $('#proName').val();
            // 调用jQuery的ajax方法
            $.ajax({
                // 提交地址，就是控制器方法的接收请求地址
                url:"/jsonBingPro",
                // 请求方式
                type:"post",
                // 提交的数据
                data:JSON.stringify({proId:proId,proName:proName}),
                // 提交的类型
                contentType:"application/json;charset=utf-8",
                // 数据类型
                dataType:"json",
                // 提交成功之后的返回值
                success:function (response){alert(response)}
            })
        }

        function sumbmitProducts(){
            var pro1 = ({proId:$('#proId').val(),proName:$('#proName').val()});
            var pro2 = ({proId:$('#proId2').val(),proName:$('#proName2').val()});
            $.ajax({
                url:"/jsonBingPros",
                type:"post",
                data:JSON.stringify([pro1,pro2]),
                contentType: "application/json;charset=utf-8",
                dataType:"json",
                success:function (response){alert(response)}
            })
        }
    </script>
</body>
</html>