当前位置：首页 > news >正文

SpringMVC--03--前端传数组给后台

news 2026/2/9 3:00:37

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

案例1
- 乘客个人信息
- 方法1：表单提交，以字段数组接收
- 方法2：表单提交，以BeanListModel接收
- 方法3：==将Json对象==序列化成Json字符串提交，以List接收
- - 3.1 List<Map<String,Object>
  - 3.2 List< User>
案例 2：后台接受数组和集合的案例
- 基本user配置
- 场景1： POST提交 -前端传==数组==后台如何接受
- - - ["2021","2022"]
    - 数组 String [ ] 接
    - List< String>接
- 场景2： get提交：前端在URL里面传id1，id2后台如何接受？
- 场景3：前端传==对象集合==后台如何接受？
- 场景4 ：综合情况

案例1

我要在一个表单里同时一次性提交多名乘客的个人信息到SpringMVC，前端HTML和SpringMVC Controller里该如何处理？

乘客个人信息

public class User {private Integer id;private String name;private String pwd;@Overridepublic String toString() {return "User{" +"id=" + id +", name='" + name + '\'' +", pwd='" + pwd + '\'' +'}';}// .......后面还有getter、setter方法，省略了}

方法1：表单提交，以字段数组接收

HTML代码如下：

    <form action="/user/submitUserList_1" method="post">ID:<input type="text" name="id"><br/>Username:<input type="text" name="name"><br/>Password:<input type="text" name="pwd"><br/><br/>ID:<input type="text" name="id"><br/>Username:<input type="text" name="name"><br/>Password:<input type="text" name="pwd"><br/><br/><input type="submit" value="submit"></form>

Java代码如下：

    @RequestMapping(value = "/submitUserList_1", method ={RequestMethod.POST})@ResponseBodypublic String submitUserList_1(HttpServletResponse response,Integer[] id, String[] name, String[] pwd)throws Exception{String result = "";if(id == null || id.length <= 0){ return "No any ID.中文"; }List<User> userList = new ArrayList<User>();for (int i = 0; i < id.length; i++ ) {User user = new User();user.setId(id[i]);user.setName(name[i]);user.setPwd(pwd[i]);userList.add(user);}result = this.showUserList(userList);return result;}

方法2：表单提交，以BeanListModel接收

HTML代码如下：

    <form action="/user/submitUserList_2" method="post">ID:<input type="text" name="users[0].id"><br/>Username:<input type="text" name="users[0].name"><br/>Password:<input type="text" name="users[0].pwd"><br/><br/>ID:<input type="text" name="users[2].id"><br/>Username:<input type="text" name="users[2].name"><br/>Password:<input type="text" name="users[2].pwd"><br/><br/><input type="submit" value="Submit"></form>

除了刚才公用的User类，还要封装一个User的容器类UserModel：

public class UserModel {private List<User> users;public List<User> getUsers() {return users;}public void setUsers(List<User> users) {this.users = users;}public UserModel(List<User> users) {super();this.users = users;}public UserModel() {super();}}

SpringMVC Controller方法：

    @RequestMapping(value = "/submitUserList_2", method ={RequestMethod.POST})@ResponseBodypublic String submitUserList_2(UserModel users)throws Exception{String result = "";List<User> userList = users.getUsers();if(userList == null || userList.size() <= 0){ return "No any ID.中文"; }result = this.showUserList(userList);return result;}

方法3：将Json对象序列化成Json字符串提交，以List接收

HTML代码：

<head><title>submitUserList_3</title><meta http-equiv="content-type" content="text/html; charset=utf-8"><script language="JavaScript" src="/js/jquery.min.js" ></script><script language="JavaScript" src="/js/jquery.json.min.js" ></script><script type="text/javascript" language="JavaScript">function submitUserList_3() {alert("ok");var customerArray = new Array();customerArray.push({id: "1", name: "李四", pwd: "123"});customerArray.push({id: "2", name: "张三", pwd: "332"});$.ajax({url: "/user/submitUserList_3",type: "POST",contentType : 'application/json;charset=utf-8', //设置请求头信息dataType:"json",//data: JSON.stringify(customerArray),    //将Json对象序列化成Json字符串，JSON.stringify()原生态方法data: $.toJSON(customerArray),            //将Json对象序列化成Json字符串，toJSON()需要引用jquery.json.min.jssuccess: function(data){alert(data);},error: function(res){alert(res.responseText);}});}</script>
</head><body><h1>submitUserList_3</h1><input id="submit" type="button" value="Submit" onclick="submitUserList_3();">
</body>

3.1 List<Map<String,Object>

 @RequestMapping("/createOrder")@ResponseBodypublic int createOrder(@RequestBody List<Map<String,Object>> list ){if (list != null && list.size() > 0){result = this.showList(users);return result;}return 0;}

3.2 List< User>

Java代码：

    @RequestMapping(value = "/submitUserList_3", method ={RequestMethod.POST})@ResponseBodypublic String submitUserList_3(@RequestBody List<User> users)throws Exception{String result = "";if(users == null || users.size() <= 0){ return "No any ID.中文"; }result = this.showUserList(users);return result;}

案例 2：后台接受数组和集合的案例

基本user配置

首先我们模拟创建一个user的实例

@Data
public class User {private String id;private String name;private Integer age;}

创建一个公共的返回值的Result类

import lombok.Data;@Data
public class Result<T> {private static final long serialVersionUID = 1L;private Integer code;private String msg;private T data;public static Result fail() {Result Result = new Result();Result.setCode(1);Result.setMsg("服务器错误！！！");return Result;}public static Result fail(String msg) {Result Result = new Result();Result.setCode(1);Result.setMsg(msg);return Result;}public static <T> Result success(T data) {Result Result = new Result();Result.setCode(0);Result.setData(data);return Result;}public static Result success() {Result Result = new Result();Result.setCode(0);Result.setMsg("操作成功！");Result.setData("success");return Result;}}

场景1： POST提交 -前端传数组后台如何接受

[“2021”,“2022”]

var ids = ['2021','2022'];
$.ajax({type : 'POST',url: 'course/delete',contentType : "application/json" ,data: JSON.stringify(ids),success : function(data) {}
});

数组 String [ ] 接

@RequestMapping(value = "/delete", method = {RequestMethod.POST})
@ResponseBody
public void delete(@RequestBody String[] id) {for (String string : id) {System.out.println(string);}
}

List< String>接

 @PostMapping("/saveUserIds")public Result saveStrings(@RequestBody List<String> list) {logger.info("传入的参数是{}",list);//模拟逻辑层做一个入参校验if (CollectionUtils.isEmpty(list)){return Result.fail();}return Result.success();}

在这里插入图片描述

场景2： get提交：前端在URL里面传id1，id2后台如何接受？

@RequestParam或@PathVariable
前台可以直接URL中通过id1，id2的方式入参，后台直接通过数组或List的的方式来接收，作为动态sql的入参，使用动态sql的foreach语法：

    @ApiOperation("通过alarmId删除报警记录")@DeleteMapping("/delete/{alarmIds}")public Result delete(@ApiParam("报警记录id") @PathVariable Long[] alarmIds){return alarmRecordService.deleteAlarmRecordByIds(alarmIds);}

场景3：前端传对象集合后台如何接受？

[{"id":"1","name":"辰兮","age":"22"},{"id":"2","name":"辰兮要努力","age":"23"}
]

   /*** 前端传对象集合 后端用集合接* @param userList* @return*/@PostMapping("/saveList")public Result saveUserList(@RequestBody List<User> userList) {logger.info("传入的参数是{}",userList);//模拟逻辑层做一个入参校验if (CollectionUtils.isEmpty(userList)){return Result.fail();}return Result.success();

在这里插入图片描述

场景4 ：综合情况

就是前端除了传一个集合外，还要传一个字符串或者数字等属性

入参案例如下

{"userList":[{"id ":"1","name":"辰兮","age":"22"},{"id":"2","name":"辰兮要努力","age":"23"}],"open":1
}

再创建一个对象接受

/*** @program: demo* @description: 用户对象接受类*/
@Data
public class UserVo {private List<User> userList;private Integer open;
}

/*** @program: demo* @description: 前后端传值交互案例*/
@RestController
@RequestMapping("/user")
public class UserController {//打印日志private static final Logger logger = LoggerFactory.getLogger(UserController.class);/*** 业务场景：前端传一个数组➕一个字符串或者数字等* @param userVo* @return*/@PostMapping("/saveUserVo")public Result saveUserVoList(@RequestBody UserVo userVo) {logger.info("传入的参数是{}",userVo);return Result.success();}
}

我们可以debug查看一下入参，很清晰的可以看到前端传入的参数
在这里插入图片描述

SpringMVC--03--前端传数组给后台

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录案例1乘客个人信息方法1：表单提交，以字段数组接收方法2：表单提交，以BeanListModel接收方法3：将Json对象序…...

编程日记 2024/3/8 11:09:22

【C++干货基地】六大默认成员函数： This指针 | 构造函数 | 析构函数

🎬 鸽芷咕：个人主页 🔥 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想，就是为了理想的生活! 引入哈喽各位铁汁们好啊，我是博主鸽芷咕《C干货基地》是由我的襄阳家乡零食基地有感而发，不知道各位的…...

编程日记 2024/3/8 11:08:21

99.qt qml-单例程序实现

在之前讲过： 58.qt quick-qml系统托盘实现https://nuoqian.blog.csdn.net/article/details/121855993 由于，该示例只是简单讲解了系统托盘实现，并没有实现单例程序，所以多次打开后就会出现多个exe出现的可能，本章出一章QML单例程序实现，多次打开始终只显示出第一个打开…...

编程日记 2024/3/8 11:07:19

【软件工程】可用性测试：提升软件、网站与产品用户体验的关键环节

🍎个人博客：个人主页 🏆个人专栏：Linux ⛳️ 功不唐捐，玉汝于成目录正文关注点界面设计： 导航测试： 交互测试： 易用性测试： 多平台兼容性： 我…...

编程日记 2024/3/8 11:05:17

EPLAN的国产平替软件？SuperWORKS自动化版尝鲜

在电气设计领域，EPLAN作为德国老牌软件，知名度较高，使用体验也非常好！在中国市场，是否有一款国产软件与之媲美？答案当然是有的！ 接下来为大家分享一款宝藏级别的国产电气设计软件——SuperWORK…...

编程日记 2024/3/8 11:04:16

【MySQL 系列】MySQL 架构篇

在我们开始了解 MySQL 核心功能之前，首先我们需要站在一个全局的视角，来看 SQL 是如何运作执行的。通过这种方式，我们可以在头脑中构建出一幅 MySQL 各组件之间的协同工作方式，有助于我们加深对 MySQL 服务器的理解。文章目录 1、…...

编程日记 2024/3/8 11:01:10

C++初阶：类与对象（初篇）

目录 1. 类与对象1.1 引子：结构体与类1.2 什么是类（类的定义方式）1.3 类和结构体的区别1.4 类的访问限定符与封装1.4.1 访问限定符1.4.2 类的作用域与类的实例化 1.5 类对象的模型1.5.1 类内部资源的存储方式1.5.3 类大小的计算方式 1.6 this…...

编程日记 2024/3/8 10:59:08

Docker 创建容器并指定时区

目录 1. 通过环境变量设置时区（推荐）2. 挂载宿主机的时区文件到容器中3. 总结要在 Docker 容器中指定时区，可以通过两种方式来实现： 1. 通过环境变量设置时区（推荐） 在 Docker 运行时，可以通…...

编程日记 2024/3/8 10:58:06

1、配置：spring.servlet.multipart.location/data/tmp 2、代码 Configuration public class MultipartConfig {Value("${spring.servlet.multipart.location}")private String tmpLocation;Beanpublic MultipartConfigElement multipartConfigElement()…...

编程日记 2024/3/8 10:54:02

testvue-新增图表功能（教师那边-后续放到管理员那边）-src/main.js ，router/index.js

1.安装--然后在src/main.js中导入和使用2修改：common/sidebar.vue ,page/ echarts.vue , router/index.js , src/main.js 3sidebar.vue <template><div class"sidebar"><el-menuclass"sidebar-el-menu":default-active&quo…...

编程日记 2024/3/8 10:53:01

[HackMyVM]Quick 2

kali:192.168.56.104 主机发现 arp-scan -l # arp-scan -l Interface: eth0, type: EN10MB, MAC: 00:0c:29:d2:e0:49, IPv4: 192.168.56.104 Starting arp-scan 1.10.0 with 256 hosts (https://github.com/royhills/arp-scan) 192.168.56.1 0a:00:27:00:00:05 (Un…...

编程日记 2024/3/8 10:52:00

Mybatis-Plus实现Service封装

文章目录 5.1 MP封装Service介绍5.1.1 说明5.1.2 实现流程5.1.3 核心API介绍 5.2 MP封装Service快速入门5.2.1 定义服务扩展接口5.2.2 定义服务实现5.2.3 测试测试 5.3 MP封装Service实现CRUD操作 5.1 MP封装Service介绍 5.1.1 说明 MybatisPlus为了开发更加快捷，…...

编程日记 2024/3/8 10:48:57

平台工程指南：从架构构建到职责分工

平台工程只是 DevOps 专业化的另一个术语，还是另有所指？事实可能介于两者之间。DevOps 及其相关的 DevXOps 有着浓厚的文化色彩，以各个团队为中心。不幸的是，在许多地方，DevOps 引发了新的问题，如工具激增和…...

编程日记 2024/3/8 10:45:52

Docker系列之docker与docker-compose离线安装

docker离线安装一、离线安装包二、安装命令三、配置四、docker-compose 一、离线安装包上传离线安装包至/root/目录下，docker离线安装包下载链接。二、安装命令 cd /root mkdir k8sOfflineSetup tar -xzvf k8sOfflineSetup-2020-02-20.tar.gz -C k8sOfflineSe…...

编程日记 2024/3/8 10:42:48

css flex 布局换行

默认使用display: flex;是不换行的，只需要加上flex-wrap: wrap;就行了，效果图 .app-center {display: flex;flex-wrap: wrap;justify-content:flex-start; } 通过上面我们发现虽然时间换行了，但是每行的边距不一样加上这个就行了&#xff…...

编程日记 2024/3/8 10:40:44

使用腾讯云快速搭建WordPress网站流程详解

专栏系列文章： WordPress建站主题美化系列教程https://blog.csdn.net/seeker1994/category_12184577.html 一文搞懂WordPress是什么？为什么用它建站？怎么安装与部署？ 初次安装WordPress后如何进行网站设置（主题安装、…...

编程日记 2024/3/8 10:39:43

JavaScript发展历史与JavaScript的版本发展

JavaScript是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。它最初由Netscape公司的Brendan Eich设计，并于1995年在网景导航者浏览器上首次实现。由于Netscape与Sun合作，并希望其外观与Java相似，因此被命名为JavaScrip…...

编程日记 2024/3/8 10:38:42

零基础如何系统自学Python

零基础系统自学Python 学习前的准备明确学习目标 Python 一共有两大版本，即 Python2 以及 Python3，Python2 已停止维护，强烈建议直接上手 Python3。Python 可以说是无所不能，主要有以下几大方向，建议选择自己感兴趣…...

编程日记 2024/3/8 10:35:38

华为OD机试 - 字符串统计（Java 2024 C卷 100分）

目录专栏导读一、题目描述二、输入描述三、输出描述1、输入2、输出3、说明四、解题思路五、Java算法源码六、效果展示1、输入2、输出3、说明华为OD机试 2024C卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试（JAVA）真题&a…...

编程日记 2024/3/8 10:34:37

LeetCode-数组-前缀和-中等难度

前缀和前缀和是一种利用预处理的方式来减少整体实现复杂度的方法。基本定理假设原数列A为：[1,2,3,4,5]，与之对应的前缀和数列P则为：[1,3,6,10,15] 前缀和数列的第一项等于原数列的第一项，从第二项开始前缀和数列每一项计算…...

编程日记 2024/3/8 10:31:33

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明： 想象一下，你正在用eNSP搭建一个虚拟的网络世界，里面有虚拟的路由器、交换机、电脑（PC）等等。这些设备都在你的电脑里面“运行”，它们之间可以互相通信，就像一个封闭的小王国。但是&#…...

编程新知 2026/2/8 4:37:17

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码思路进入页面发现是一个登录框，很难让人不联想到SQL注入，但提示都说了不是SQL注入，所以就不往这方面想了先查看一下网页源码，发现一段JavaScript代码，有一个关键类ctfs…...

编程新知 2026/2/5 4:33:58

css实现圆环展示百分比，根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

编程新知 2026/2/5 4:28:28

Go 语言接口详解

Go 语言接口详解核心概念接口定义在 Go 语言中，接口是一种抽象类型，它定义了一组方法的集合： // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的： // 矩形结构体…...

编程新知 2026/1/4 5:19:25

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）

服务端执行命令请求的过程【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

编程新知 2026/2/2 0:45:02

【磁盘】每天掌握一个Linux命令 - iostat

目录【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景注意事项【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat（I/O Statistics）是Linux系统下用于监视系统输入输出设备和CPU使…...

编程新知 2025/9/30 16:39:11

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器，其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机（Virtual Host）。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/9/6 16:47:17

WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）

一、Solidity合约开发下面是 Solidity 合约开发的概念、代码示例及讲解，适合用作学习或写简历项目背景说明。 🧠 一、概念简介：Solidity 合约开发 Solidity 是一种专门为以太坊（Ethereum）平台编写智能合约的高级编…...

编程新知 2026/1/27 9:33:09

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

编程新知 2025/10/3 17:30:30

（转）什么是DockerCompose?它有什么作用？

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用，而无需手动一个个创建和运行容器。 Compose文件是一个文本文件，通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

编程新知 2026/1/31 22:59:12