当用户在页面触发某种请求时，一般会将一些参数（key/value）带到后台。在SpringMVC中可以通过参数绑定，将客户端请求的key/value数据绑定到Controller处理器方法的形参上。

有时候前端请求的数据是批量的，此时就要求Web端去处理请求时，获取这些批量的请求参数。一般批量的请求参数在Java中是以数组或者集合的形式接收的，而SpringMVC提供了接收和解析数据和集合参数类型的机制。

推荐文章：《SpringMVC请求参数的绑定与@RequestParam注解的使用》

1、数组类型的请求参数

数组类型的请求参数，在HTML页面可能出现类似复选框的表单，让用户选择一个或者多个数据进行操作。

【示例】实现批量删除功能，在HTML页面中通过复选框选择一个或者多个用户信息，并提交到后台，后台Controller控制器中的方法获取数组类型的请求参数。

（1）创建HTML页面，通过复选框选择一个或者多个用户信息，并提交到后台。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组类型的请求参数</title>
    <meta name="author" content="pan_junbiao的博客">
    <style>
        table { border-collapse: collapse;}
        table,table tr th, table tr td { border:1px solid #000000; text-align: center; padding: 5px;}
        .u_button{padding: 5px; margin-top: 10px;}
    </style>
</head>
<body>
<body>
<table>
    <tr>
        <th><input type="checkbox" id="checkAll" /></th>
        <th>编号</th>
        <th>用户名称</th>
        <th>博客信息</th>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkItem" value="1"/></td>
        <td>1</td>
        <td>pan_junbiao的博客</td>
        <td>您好，欢迎访问 pan_junbiao的博客</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkItem" value="2"/></td>
        <td>2</td>
        <td>pan_junbiao的博客</td>
        <td>https://blog.csdn.net/pan_junbiao</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkItem" value="3"/></td>
        <td>3</td>
        <td>pan_junbiao的博客</td>
        <td>您好，欢迎访问 pan_junbiao的博客</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkItem" value="4"/></td>
        <td>4</td>
        <td>pan_junbiao的博客</td>
        <td>https://blog.csdn.net/pan_junbiao</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkItem" value="5"/></td>
        <td>5</td>
        <td>pan_junbiao的博客</td>
        <td>您好，欢迎访问 pan_junbiao的博客</td>
    </tr>
</table>
<input type="button" class="u_button" value="反选" id="btnCheckedRev"/>
<input type="button" class="u_button" value="批量删除" id="btnBatchDelete"/>
</body>
</body>
<script src="/js/jquery-3.4.1.min.js"></script>
<script>
    $(document).ready(function() {
        //全选
        $("#checkAll").click(function () {
            $("[name=checkItem]:checkbox").prop("checked", this.checked);
        });

        //复选框组的联动效果
        $("[name=checkItem]:checkbox").click(function () {
            var flag = true;
            $("[name=checkItem]:checkbox").each(function () {
                if (!this.checked) {
                    flag = false;
                }
            });
            $("#checkAll").prop("checked", flag);
        });

        //反选
        $("#btnCheckedRev").click(function () {
            $("[name=checkItem]:checkbox").each(function () {
                this.checked = !this.checked;
            });
        });

        //批量删除事件
        $("#btnBatchDelete").click(function () {
        let idArray = new Array(); //批量删除的员工ID数组
        $("[name=checkItem]:checkbox:checked").each(function (index) {
            idArray.push($(this).val());
        });

        if (idArray.length == 0) {
            alert("请选择要删除的用户！");
            return;
        }

        if (!confirm("确定删除记录吗？")) {
            return;
        }

        //执行Ajax请求
        $.ajax({
            type: "POST",
            url: "/user/batchDeleteUser",
            data: {userIds: idArray},
            success: function (result) {
                if (result == true) {
                    alert("删除成功");
                }
                else {
                    alert("删除失败");
                }
            }
        });
    });
});
</script>
</html>

页面执行结果：

（2）编写Controller控制器中的执行方法，获取数组类型的请求参数。

/**
 * 批量删除用户信息
 * @param userIds 数组
 * @author pan_junbiao
 */
@RequestMapping("/batchDeleteUser")
@ResponseBody
public boolean batchDeleteUser(@RequestParam(value="userIds[]") Integer[] userIds)
{
    //参数验证
    if (userIds == null || userIds.length == 0)
    {
        return false;
    }

    //打印数组
    System.out.println("用户编号：");
    Arrays.stream(userIds).forEach(System.out::println);

    //执行后台批量删除（忽略代码）
    return true;
}

注意：在后台控制器方法的参数声明中一定要添加 @RequestParam(value="userIds[]") 语句，否则无法获取提交的用户编号数组。

控制台输出结果：

2、List类型的请求参数

List类型的请求参数。当想把页面上的批量数据通过SpringMVC转换为Web端的List类型的对象时，处理器适配器会转换格式将请求参数解析为相应的List集合。

【示例】实现批量新增功能，前端HTML页面提交多条用户信息，后台Controller控制器中的方法获取List类型的请求参数。

（1）创建HTML页面，提交多条用户信息到后台Controller控制器中的方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>List类型的请求参数</title>
    <meta name="author" content="pan_junbiao的博客">
    <style>
        .u_button{padding: 5px; margin-top: 10px;}
    </style>
</head>
    <input type="button" class="u_button" value="批量新增" id="btnBatchAdd"/>
<body>
</body>
<script src="/js/jquery-3.4.1.min.js"></script>
<script>
    $(document).ready(function()
    {
        //批量删除事件
        $("#btnBatchAdd").click(function() {
            //创建用户列表
            let userList = [];
            userList.push({userId: 1, userName: "pan_junbiao的博客", blogRemark: "您好，欢迎访问 pan_junbiao的博客"});
            userList.push({userId: 2, userName: "pan_junbiao的博客", blogRemark: "https://blog.csdn.net/pan_junbiao"});
            userList.push({userId: 3, userName: "pan_junbiao的博客", blogRemark: "您好，欢迎访问 pan_junbiao的博客"});
            userList.push({userId: 4, userName: "pan_junbiao的博客", blogRemark: "https://blog.csdn.net/pan_junbiao"});
            userList.push({userId: 5, userName: "pan_junbiao的博客", blogRemark: "您好，欢迎访问 pan_junbiao的博客"});

            //执行Ajax请求
            $.ajax({
                type: "POST",
                url: "/user/batchAddUser",
                dataType: "json",
                contentType: "application/json; charset=UTF-8",
                data: JSON.stringify(userList), //转换为JSON
                success: function (result) {
                    if (result == true) {
                        alert("新增成功");
                    }
                    else {
                        alert("新增失败");
                    }
                }
            });
        });
    });
</script>
</html>

（2）创建用户信息实体类（UserInfo.java）。

package com.pjb.entity;

/**
 * 用户信息实体类
 * @author pan_junbiao
 **/
public class UserInfo
{
    private int userId; //用户编号
    private String userName; //用户姓名
    private String blogRemark; //博客信息

    //省略getter与setter方法...

    @Override
    public String toString()
    {
        return "编号：" + this.userId + "  用户：" + this.userName +  "  博客：" + this.blogRemark;
    }
}

（3）编写Controller控制器中的执行方法，获取List类型的请求参数。

/**
 * 批量新增用户信息
 * @param userInfoList 列表
 * @author pan_junbiao
 */
@RequestMapping("/batchAddUser")
@ResponseBody
public boolean batchAddUser(@RequestBody List<UserInfo> userInfoList)
{
    //参数验证
    if (userInfoList == null || userInfoList.size()==0)
    {
        return false;
    }

    //打印数组
    System.out.println("用户列表：");
    userInfoList.stream().forEach(System.out::println);

    //执行后台批量新增（忽略代码）
    return true;
}

注意：在后台控制器方法的参数声明中一定要添加 @RequestBody 注解，@RequestBody 注解的特点就是，根据请求参数的Content-Type决定是否将相关格式转换至包装类，如果Content-Type是目标类型，就进行转换。这里转换的是JSON数据，所有要求将前端请求的Content-Type指定为“application/json”类型。

控制台输出结果：

SpringMVC传递与接收数组或列表参数

1、数组类型的请求参数

2、List类型的请求参数

猜你喜欢

SpringMVC传递与接收数组或列表参数

1、 数组类型的请求参数

2、List类型的请求参数

猜你喜欢

1、数组类型的请求参数