1、前端代码中
在form的表单元素的name属性中,填写类似XXX[index].name的属性名,我这里采用的是thymeleaf模板框架构建的,其它前端可以做类似的修改。
<form class="form-horizontal m-t" id="signupForm"> <div class="form-group"> <label class="col-sm-3 control-label">项目编号:</label> <div class="col-sm-8"> <input id="projectNumber" name="projectNumber" th:value="${dict.projectNumber}" class="form-control" type="text"> </div> </div> <th:block th:unless="${#lists.isEmpty(dict.records)}"> <th:block th:each="r,stat : ${dict.records}"> <div class="form-group"> <label class="col-sm-3 control-label" th:text="收款时间+${stat.count}+:"></label> <div class="col-sm-8"> <input id="moneyTime" th:name="records[+${stat.index}+].moneyTime" th:value="${r.moneyTime}" class="form-control" type="text"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label" th:text="收款金额+${stat.count}+:"></label> <div class="col-sm-8"> <input id="sumMoney" th:name="records[+${stat.index}+].sumMoney" th:value="${r.sumMoney}" class="form-control" type="text"> </div> </div> </th:block> </th:block> <div class="form-group"> <div class="col-sm-8 col-sm-offset-3"> <button type="submit" class="btn btn-primary">提交</button> </div> </div> </form>
这样的表单,提交后,浏览器抓到的数据结构:
Form Data:
projectNumber: ZWI89
records[0].moneyTime: 2019-01-03
records[0].sumMoney: 239.0000
records[1].moneyTime: 2019-01-02
records[1].sumMoney: 346.0000
records[0].moneyTime: 2019-01-03
records[0].sumMoney: 239.0000
records[1].moneyTime: 2019-01-02
records[1].sumMoney: 346.0000
2、后端的controller
/** * 修改 */ @ResponseBody @RequestMapping("/update") public R update(SellContractVO records) { System.out.println(JSON.toJSONString(records)); // sellContractService.update(records); return R.ok(); }
controller打印出的结果
{ "projectNumber": "ZWI89", "records": [{ "moneyTime": "2019-01-03", "sumMoney": "239.0000" }, { "moneyTime": "2019-01-02", "sumMoney": "346.0000" }] }
3、实体类SellContractVO
public class SellContractVO implements Serializable { private static final long serialVersionUID = 3768978134789546577L; /** * 项目编号 */ private String projectNumber; /** * 收付款记录 */ private List<MoneyRecord> records; public String getProjectNumber() { return projectNumber; } public void setProjectNumber(String projectNumber) { this.projectNumber = projectNumber; } public List<MoneyRecord> getRecords() { return records; } public void setRecords(List<MoneyRecord> records) { this.records = records; } }
4、实体类MoneyRecord
package com.bootdo.contract.vo; import java.io.Serializable; public class MoneyRecord implements Serializable { /** * */ private static final long serialVersionUID = 7671784309099657317L; /** * 主键id */ private Long id; /** * 收付款时间 */ private String moneyTime; /** * 收付款金额 */ private String sumMoney; public MoneyRecord() { super(); } public MoneyRecord(Long id, String moneyTime, String sumMoney) { super(); this.id = id; this.moneyTime = moneyTime; this.sumMoney = sumMoney; } public Long getId() { return id; } public void setId(Long id) { this.id = id; } public String getMoneyTime() { return moneyTime; } public void setMoneyTime(String moneyTime) { this.moneyTime = moneyTime; } public String getSumMoney() { return sumMoney; } public void setSumMoney(String sumMoney) { this.sumMoney = sumMoney; } }
参考链接:https://blog.csdn.net/lutinghuan/article/details/46820023
相关推荐
Spring MVC提供了多种方式来接收前端传递的数据,包括单独的参数、数组、列表以及自定义对象。本教程将重点讲解如何接收ajax和form表单传递的集合参数。 一、接收Ajax传递的集合参数 1. JSON格式数据:Ajax通常...
除了这两种主要方式,还可以使用诸如List、Set等集合类型,或者POJO、DTO(数据传输对象)等复杂的数据结构来接收JSON数据,只要这些类型能够通过JSON序列化/反序列化机制与JSON数据结构相对应。 在传输数据时,...
此外,为了在提交表单时能够正确处理这些动态数据,可能需要自定义表单提交事件,或者使用AJAX异步提交。 四、优化用户体验 为了让用户体验更好,可以考虑以下几点: - 添加动画效果:在添加或删除元素时,加入...
SpringMVC提供了强大的数据绑定功能,可以自动将请求参数绑定到控制器方法的参数上,也可以将模型对象的属性绑定到HTML表单字段。这包括对基本类型、复杂类型以及集合类型的绑定。 7. **处理器拦截器** 处理器...
在SpringMVC中,可以在服务端将图片数据转换为Base64字符串,然后将其返回给前端,前端再根据这个字符串创建预览图片。 五、文本域传值 除了图片上传,此示例还包含了普通文本字段的传递。这些文本字段可以通过普通...
- **数据回显**:即表单提交后自动填入之前输入的数据。 - **上传图片**:通过配置文件上传处理器,支持图片等文件的上传。 - **JSON数据交互**:SpringMVC支持JSON数据的序列化和反序列化,便于与Ajax等前端技术...
- **DispatcherServlet**:作为SpringMVC的前端控制器,负责接收HTTP请求,并根据配置的映射规则转发到相应的处理器。 - **Controller**:处理请求的业务逻辑,通常是一个实现了Spring的`@Controller`注解的类。 ...
- `@ModelAttribute`:用于封装表单提交的数据到对象中。 - `@SessionAttributes`:用于指定要存储在会话中的模型属性名称。 - `@ModelAttribute("model")`:用于将方法的返回值添加到模型中。 ##### 4.2 参数绑定 ...
8. **数据绑定**:掌握表单数据的自动绑定,包括单个字段绑定和集合绑定,以及如何使用`@ModelAttribute`进行模型数据绑定。 9. **异常处理**:学习如何使用`@ExceptionHandler`处理异常,以及全局异常处理类的配置...
描述中提到的“集合传值”是指如何将前端表单的数据批量传递到后端控制器。这里有几个关键知识点: 1. **参数绑定**:在SpringMVC中,可以通过注解`@RequestParam`或`@ModelAttribute`实现参数绑定。`@RequestParam...
1. **前端控制器 DispatcherServlet**:这是SpringMVC的第一个环节,负责接收客户端发送的HTTP请求,并将其转发给合适的处理器进行处理。DispatcherServlet本质上是一个Servlet,因此需要在`web.xml`文件中进行配置...
例如,表单提交的数据可以自动映射到Java对象的属性,极大地简化了开发过程。同时,SpringMVC还支持集合类型的数据绑定,如List、Map等。 三、数据验证 SpringMVC提供了强大的数据验证机制,可以通过在bean的属性上...
- 当表单提交失败时,将表单数据重新填充到页面上,便于用户修改错误。 3. **文件上传** - 支持通过HTTP请求上传文件。 - 使用MultipartFile类型来接收上传的文件。 4. **JSON数据交互** - 使用Jackson或Gson...
SpringMVC基于前端控制器(DispatcherServlet)的设计模式,它作为整个web应用的入口,负责接收请求,调度处理,并将结果返回给客户端。核心组件包括:DispatcherServlet、HandlerMapping、HandlerAdapter、...
- **实现方式**:通过`@ModelAttribute`将数据传递到视图,实现表单数据的回显。 ##### 6.3 文件上传 - **实现方式**:使用MultipartResolver解析文件上传请求,通过`@RequestParam`或`@RequestPart`注解处理上传...
5. 图片上传:图片上传通常涉及前端的表单提交和后端的接收处理。前端通常使用HTML5的`<input type="file">`元素,配合Ajax或Form表单提交文件。后端通过MultipartFile接口(Spring MVC提供的)接收上传的文件,然后...
在SpringMVC中,我们可以使用`@RequestParam("file") MultipartFile file`注解来接收前端提交的单个文件。`MultipartFile`是Spring提供的接口,用于处理上传的文件。首先,需要在控制器方法中定义这个参数,然后在...
SpringMvc通过DispatcherServlet接收请求,通过HandlerMapping找到处理请求的Controller,然后Controller调用Service层处理业务逻辑,最后通过ViewResolver返回视图给用户。 **MiniUI组件库** MiniUI可能是这个项目...
同时,通过 @Valid 注解和 Hibernate Validator,可以实现表单数据的验证。 9. **拦截器(Interceptor)** 拦截器是预处理和后处理请求的组件,可以用来执行全局的任务,如登录检查、日志记录等。 10. **上传文件...