SpringMVCは、配列またはリストのパラメーターを送受信します

ユーザーがページで特定のリクエストをトリガーすると、通常、一部のパラメーター(キー/値)がバックグラウンドで実行されます。SpringMVCでは、パラメーターバインディングを介して、クライアントから要求されたキー/値データをコントローラープロセッサメソッドの正式なパラメーターにバインドできます。

フロントエンドによって要求されたデータがバッチである場合があります。この場合、Web側は、要求を処理するときにこれらのバッチ要求パラメーターを取得する必要があります。通常、バッチ要求パラメーターはJavaの配列またはコレクションの形式で受信され、SpringMVCはデータおよびコレクションパラメータータイプを受信および解析するためのメカニズムを提供します。

推奨記事:「SpringMVCリクエストパラメータのバインドと@RequestParamアノテーションの使用」

1.配列タイプのパラメーターを要求します 

配列タイプのリクエストパラメータの場合、チェックボックスのようなフォームがHTMLページに表示され、ユーザーが操作する1つ以上のデータを選択できるようになります。

【例】一括削除機能実装するには、HTMLページのチェックボックスから1つ以上のユーザー情報を選択してバックグラウンドに送信します。バックグラウンドコントローラーコントローラーのメソッドは、配列型のリクエストパラメーターを取得します。

(1)HTMLページを作成し、チェックボックスから1つ以上のユーザー情報を選択して、バックグラウンドに送信します。

<!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)配列型のリクエストパラメータを取得するために、コントローラに実行メソッドを記述します。

/**
 * 批量删除用户信息
 * @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 []")ステートメントをバックグラウンドコントローラーメソッドのパラメーター宣言に追加する必要があります。そうしないと、送信されたユーザーID配列を取得できません。

コンソール出力: 

 

2.リストタイプのリクエストパラメータ

リストタイプのリクエストパラメータ。SpringMVCを介してページ上のバッチデータをWeb側のリストタイプオブジェクトに変換する場合、プロセッサアダプタはフォーマットを変換し、リクエストパラメータを対応するリストコレクションに解析します。

【例】バッチ加算機能実現するために、フロントエンドのHTMLページが複数のユーザー情報を送信し、バックエンドのコントローラーコントローラーのメソッドがリストタイプのリクエストパラメーターを取得します。

(1)HTMLページを作成し、複数のユーザー情報をバックグラウンドコントローラーに送信します。

<!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)コントローラに実行メソッドを記述し、リストタイプのリクエストパラメータを取得します。

/**
 * 批量新增用户信息
 * @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」タイプとして指定することです。

コンソール出力: 

 

おすすめ

転載: blog.csdn.net/pan_junbiao/article/details/109778471