ajax 前端到后台传List<CxffExamRecordChild> 后端接收不到,前端应该怎么写
时间: 2024-03-05 18:50:15 浏览: 30
前端传 List 类型数据到后端的实现方式有多种,下面提供两种常用的方法:
方法一:使用 JSON.stringify() 将 List 类型数据转换为 JSON 格式字符串,再通过 AJAX 发送到后端。
例如:
```javascript
var dataList = [{id:1, name:"张三"}, {id:2, name:"李四"}]; // List 类型数据
var jsonData = JSON.stringify(dataList); // 转换为 JSON 格式字符串
$.ajax({
url: "/api/saveData",
type: "POST",
contentType: "application/json",
data: jsonData,
success: function (result) {
console.log(result);
},
error: function (xhr, status, error) {
console.log(error);
}
});
```
后端接收数据的代码:
```java
@PostMapping("/api/saveData")
public void saveData(@RequestBody List<CxffExamRecordChild> dataList) {
// 处理接收到的数据
}
```
方法二:使用 FormData 对象将 List 类型数据封装成表单数据,再通过 AJAX 发送到后端。
例如:
```javascript
var dataList = [{id:1, name:"张三"}, {id:2, name:"李四"}]; // List 类型数据
var formData = new FormData();
for (var i = 0; i < dataList.length; i++) {
formData.append("dataList[" + i + "].id", dataList[i].id);
formData.append("dataList[" + i + "].name", dataList[i].name);
}
$.ajax({
url: "/api/saveData",
type: "POST",
data: formData,
processData: false,
contentType: false,
success: function (result) {
console.log(result);
},
error: function (xhr, status, error) {
console.log(error);
}
});
```
后端接收数据的代码:
```java
@PostMapping("/api/saveData")
public void saveData(@ModelAttribute("dataList") List<CxffExamRecordChild> dataList) {
// 处理接收到的数据
}
```
以上两种方法都可以实现将 List 类型数据传递到后端,具体选择哪种方式,需要根据实际情况进行选择。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![gz](https://img-home.csdnimg.cn/images/20210720083447.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)