springmvc如何接收前端通过表单提交的集合数据
程序员文章站
2022-03-22 14:17:03
...
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
上一篇: 堆栈有几种实现方式?
下一篇: linux命令查询mysql的有哪些