当用户在页面触发某种请求时,一般会将一些参数(key/value)带到后台。在SpringMVC中可以通过参数绑定,将客户端请求的key/value数据绑定到Controller处理器方法的形参上。
有时候前端请求的数据是批量的,此时就要求Web端去处理请求时,获取这些批量的请求参数。一般批量的请求参数在Java中是以数组或者集合的形式接收的,而SpringMVC提供了接收和解析数据和集合参数类型的机制。
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”类型。
控制台输出结果: