form表单传递对象数组

在JSP页面开发中,我们常常会用到form表单做数据提交,由于以前一直只是使用 form表单提交单个对象,只要表单文本域的name值和接收的对象的属性名一致,那么传值就没有什么问题。不过,在前几天的开发任务中,遇到了需要批量 传递对象,也就是需要传递对象数组,在此做个总结。今天又遇到需要向后台传递数组,便一并写下来吧。

1、ajax传递普通数组
前台代码

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var deleteNum= []; //定义要传递的数组
deleteNum.push( "1" );
deleteNum.push( "2" );
deleteNum.push( "3" ); //向数组中添加元素
 
$.ajax({
     type: "post" ,
     url: "deleteNum.do" ,
     data:{deleteNum:deleteNum},
     traditional: true , //必须指定为true
     success: function (data){
         if (data.success){
             deleteNum = [];
         }
     }
});

 后台代码

1
2
3
4
5
public ActionResult deleteNum(String[] deleteNum){
     
     //这个时候已经得到了deleteNum数组值
     return Json( new {status=1});
}

 form表单提交自定义对象数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< form id="form" name="form"  method="post">
   < table >
     < tr >
       < td >< input type="text" name="user[0].name"/></ td >
       < td >< input type="text" name="user[0].password"/></ td >
     </ tr >
     < tr >
       < td >< input type="text" name="user[1].name"/></ td >
       < td >< input type="text" name="user[1].password"/></ td >
     </ tr >
     < tr >
       < td >< input type="text" name="user[2].name"/></ td >
       < td >< input type="text" name="user[2].password"/></ td >
     </ tr >
   </ table >
</ form >

 之后在form表单提交给后台时,需要先定义一个对象,当然,别忘了定义User对象,属性为name,password,重点是下面这个用于接收form表单提交的对象数组,如果还有其他对象数组需要接收,那在这个类里面再定义相应的ArrayList属性即可。

/**
 * 类型描述
 * 表单列表对象 用于接收form表单提交的对象数组
 * @since  2016-2-25
 * @author 古时一轮月
 *
 */
public class FormListObject { private ArrayList<User> userlist; public ArrayList<User> getUserlist() { return userlist; } public void setUserlist(ArrayList<User> userlist) { this.userlist= userlist; } }

定义好该对象之后,在controller层接收就可以了

1
2
3
public AjaxResult saveOrUpdateUser(FormListObject list){
     List<User> userlist = list.getUserlist(); //你会看到你想要的
}

 转自:http://blog.youkuaiyun.com/u014252157/article/details/50751302

转载于:https://www.cnblogs.com/anruy/p/6856893.html

<think>我们正在解决的是前端向后端传递List对象数组的数据格式问题。根据之前的错误信息,我们知道后端期望接收一个List对象数组,但前端传递的是字符串,导致类型转换失败。正确的做法是前端应该传递一个JSON数组,每个元素是一个对象,对应后端的对象结构。 参考引用: 引用[1]提到:后台不仅可以使用List集合去接受,还可以使用数组去接受参数,例如:`@PostMapping("/deleteItems") @ResponseBody public R deleteItems(@RequestBody Long[] skuIds) {XXX}`。这里使用的是数组,但同样适用于List。 引用[2]和[4]展示了前端构造对象数组的方法:创建一个数组,然后向数组中添加对象。 因此,正确的前端传递List对象数组的格式应该是:一个JSON数组数组中的每个元素是一个对象对象的属性与后端接收对象的属性一一对应。 例如,如果后端接收的对象类型为: ```java public class SysOrderPrice { private String securityProject; private String safePrice; private BigDecimal standardSafeFeeInput; private BigDecimal ratesSafeFeeInput; private BigDecimal paySafeFeeInput; // 省略getter和setter } ``` 后端控制器方法可能是: ```java @PostMapping("/submit") public R submit(@RequestBody List<SysOrderPrice> sysOrderPriceList) { // 处理逻辑 } ``` 那么前端需要传递的数据格式应该是: ```json [ { "securityProject": "123", "safePrice": "40W", "standardSafeFeeInput": 1000, "ratesSafeFeeInput": 100, "paySafeFeeInput": 1000.00 }, { "securityProject": "456", "safePrice": "100w", "standardSafeFeeInput": 20000, "ratesSafeFeeInput": 100, "paySafeFeeInput": 20000.00 } ] ``` 注意:数值类型不需要引号(除非后端接收的是字符串),但有时为了统一也可以加上,但后端必须能够处理字符串到数值的转换。不过,根据之前的错误,可能是前端传递了整个数组的字符串形式,而不是一个JSON数组前端如何发送这样的数据? 使用jQuery的示例: ```javascript var sysOrderPriceList = [ { securityProject: "123", safePrice: "40W", standardSafeFeeInput: 1000, ratesSafeFeeInput: 100, paySafeFeeInput: 1000.00 }, { securityProject: "456", safePrice: "100w", standardSafeFeeInput: 20000, ratesSafeFeeInput: 100, paySafeFeeInput: 20000.00 } ]; $.ajax({ url: '/submit', type: 'POST', contentType: 'application/json', // 必须指定为json data: JSON.stringify(sysOrderPriceList), // 将数组转换为JSON字符串 success: function(response) { // 处理成功 }, error: function(error) { // 处理错误 } }); ``` 关键点: 1. 设置`contentType`为`'application/json'`,这样后端才知道你发送的是JSON数据。 2. 使用`JSON.stringify`将JavaScript数组转换为JSON字符串。 如果使用其他框架(如axios,Vue等)也是类似的,需要将数据序列化为JSON字符串,并设置请求头`Content-Type: application/json`。 如果后端不是使用`@RequestBody`,而是使用表单提交(即没有`@RequestBody`),那么传递方式会不同。但是根据之前的错误信息,我们使用的是`@RequestBody`来接收,所以必须用JSON格式。 因此,总结:前端向后端传递List对象数组的正确数据格式是JSON数组,每个元素是一个对象,属性与后端对象属性匹配。发送时,将整个数组转换为JSON字符串,并设置请求头为`application/json`。 注意:如果后端没有使用`@RequestBody`,则不能这样传递。但根据引用[1]的例子,使用`@RequestBody`接收数组或List是可行的。 另外,如果后端接收的是表单数据(而不是JSON),那么前端需要以表单的方式传递,但这种方式对于复杂的嵌套对象数组支持不好,通常推荐使用JSON。 根据用户之前的错误,是类型不匹配,将字符串传递给了List,所以这里我们强调要传递JSON数组对象数组)而不是字符串。 如果问题仍然存在,请检查: 1. 前端是否确实按照上述方式发送了数据(可以查看浏览器网络请求的负载)。 2. 后端控制器方法是否使用了`@RequestBody`注解,并且参数类型是`List<SysOrderPrice>`。 如果后端接收的是单个对象(如`OrderInfo`)中有一个属性是`List<SysOrderPrice>`,那么前端传递的整个数据结构应该是一个对象,该对象中有一个数组属性。例如: 后端对象: ```java public class OrderInfo { private List<SysOrderPrice> sysOrderPriceList; // 其他属性... } ``` 控制器: ```java @PostMapping("/submit") public R submit(@RequestBody OrderInfo orderInfo) { // ... } ``` 那么前端应该传递: ```json { "sysOrderPriceList": [ { "securityProject": "123", "safePrice": "40W", "standardSafeFeeInput": 1000, "ratesSafeFeeInput": 100, "paySafeFeeInput": 1000.00 }, { "securityProject": "456", "safePrice": "100w", "standardSafeFeeInput": 20000, "ratesSafeFeeInput": 100, "paySafeFeeInput": 20000.00 } ], // 其他属性... } ``` 请根据实际情况调整。 因此,用户需要根据后端接收的对象结构来构造前端发送的数据结构。如果是直接接收List,则发送数组;如果是接收一个包含List属性的对象,则发送一个包含该数组属性的对象。 希望这能解决问题。</think>前端向后端传递 List 对象数组的正确格式应为 **JSON 数组格式**,每个数组元素是一个对象对象的属性与后端实体类的属性一一对应。以下是具体实现方式: --- ### 正确数据格式示例 ```json [ { "securityProject": "123", "safePrice": "40W", "standardSafeFeeInput": 1000.00, "ratesSafeFeeInput": 100.00, "paySafeFeeInput": 1000.00 }, { "securityProject": "456", "safePrice": "100w", "standardSafeFeeInput": 20000.00, "ratesSafeFeeInput": 100.00, "paySafeFeeInput": 20000.00 } ] ``` --- ### 关键实现步骤 1. **前端构造数据**(JavaScript 示例): ```javascript // 1. 创建对象数组 const sysOrderPriceList = [ { securityProject: "123", safePrice: "40W", standardSafeFeeInput: 1000.00, ratesSafeFeeInput: 100.00, paySafeFeeInput: 1000.00 }, { securityProject: "456", safePrice: "100w", standardSafeFeeInput: 20000.00, ratesSafeFeeInput: 100.00, paySafeFeeInput: 20000.00 } ]; // 2. 发送AJAX请求(jQuery示例) $.ajax({ url: "/api/order/submit", type: "POST", contentType: "application/json", // 必须设置 data: JSON.stringify(sysOrderPriceList), // 转换为JSON字符串 success: function(response) { console.log("提交成功"); } }); ``` 2. **后端接收数据**(Spring Boot 示例): ```java @PostMapping("/submit") public ResponseEntity<?> submitOrder( @RequestBody List<SysOrderPrice> sysOrderPriceList // 直接映射为对象列表 ) { // 处理业务逻辑 return ResponseEntity.ok("处理成功"); } ``` 3. **实体类定义**: ```java public class SysOrderPrice { private String securityProject; private String safePrice; private BigDecimal standardSafeFeeInput; private BigDecimal ratesSafeFeeInput; private BigDecimal paySafeFeeInput; // 必须有无参构造器和getter/setter } ``` --- ### 注意事项 1. **请求头设置**: - 必须设置 `Content-Type: application/json`,否则后端无法正确解析 - 使用 `JSON.stringify()` 转换数据为字符串 2. **数据类型匹配**: - 数值类型不要加引号(如 `1000.00` 而非 `"1000.00"`) - 后端数值字段建议使用 `BigDecimal` 或 `Double` 3. **避免的常见错误**: ```js // 错误示例1:未使用JSON.stringify data: sysOrderPriceList, // 会发送为[object Object] // 错误示例2:错误的内容类型 contentType: "application/x-www-form-urlencoded", // 无法解析JSON // 错误示例3:错误的嵌套结构 data: { "data": sysOrderPriceList } // 后端需用@RequestBody Map接收 ``` --- ### 其他框架的实现 **Vue + Axios**: ```js axios.post('/api/order/submit', sysOrderPriceList, { headers: { 'Content-Type': 'application/json' } }) ``` **React + Fetch**: ```js fetch('/api/order/submit', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(sysOrderPriceList) }) ``` --- ### 调试建议 1. 在浏览器开发者工具的 **Network** 标签页检查: - 请求负载是否显示为正确格式的 JSON 数组 - 请求头是否包含 `Content-Type: application/json` 2. 使用 Postman 测试: ```json [ { "securityProject": "TEST", "safePrice": "50W", "standardSafeFeeInput": 500, "ratesSafeFeeInput": 50, "paySafeFeeInput": 500 } ] ``` --- 通过以上方式,前端可以正确传递对象数组,后端 Spring Boot 的 `@RequestBody` 能自动将 JSON 数组映射为 `List<实体类>` 对象[^1][^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值