springmvc如何接收前端通过表单提交的集合数据

onlyForCloud 2019-01-06

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

 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

相关推荐