实战指南：前端List(数组)传递给Spring Boot后端的完整实现方案

在前后端分离开发中，前端将List（数组）类型数据传递给Spring Boot后端是高频需求（如批量导出、批量操作等场景）。本文聚焦最常用的JSON格式POST请求方案，从完整代码实现到常见问题排查，全方位讲解该需求的落地方式。

一、核心实现方案：JSON格式POST请求传递数组

该方案是前后端传递复杂数据（如数组、对象列表）的首选方式，具备兼容性好、数据结构清晰的特点。

1. 前端实现（原生JS + AJAX）

以下示例以批量导出功能为例，演示如何收集列表选中数据、封装为数组并通过JSON格式发送给后端：

javascript

function download() {
    // 1. 生成随机导出文件名后缀
    const exportName = Math.floor((Math.random() * 1000000000) + 1);
    table.set();
    
    // 2. 收集选中数据，组装为字符串数组
    const codeList = [];
    const selectedList = $("#bootstrap-table").bootstrapTable('getAllSelections');

    // 校验是否选择数据
    if (selectedList.length < 1) {
        $.modal.alertWarning("请至少选择一条订单信息!!!");
        return; // 未选择数据时终止请求
    }

    // 循环提取选中数据的指定字段，存入数组
    for (let i = 0; i < selectedList.length; i++) {
        codeList.push(selectedList[i].rkdCode);
    }
    console.log("待传递的数组数据：", codeList);

    // 3. 构建XMLHttpRequest请求发送JSON数据
    var req = new XMLHttpRequest();
    // 请求方式：POST，请求地址：/export，异步：true
    req.open("POST", prefix + "/export", true);
    // 响应类型：blob（适配文件导出场景）
    req.responseType = "blob";
    // 关键：设置请求头为JSON格式，否则后端无法解析
    req.setRequestHeader("Content-Type", "application/json");

    // 加载提示
    $.modal.loading("正在处理中，请稍后...");

    // 4. 处理响应（文件下载逻辑）
    req.onload = function (event) {
        var blob = req.response;
        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = "RK-" + exportName + ".xlsx"; // 下载文件名
        link.click();
        $.modal.closeLoading(); // 关闭加载提示
    };

    // 5. 发送请求：将数组序列化为JSON字符串
    req.send(JSON.stringify(codeList));
};

2. 后端实现（Spring Boot）

后端通过@RequestBody注解接收前端传递的JSON数组，直接绑定为List类型参数：

java

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.servlet.http.HttpServletResponse;
import java.util.List;

/**
 * 接收前端数组参数的示例接口
 */
@PostMapping("/export")
@ResponseBody
public void export(@RequestBody List<String> codeList, HttpServletResponse response) throws Exception {
    // 打印接收到的完整数组
    System.out.println("接收到的数组数据：" + codeList);
    
    // 遍历数组处理每一项数据
    for (String code : codeList) {
        String trimCode = code.trim(); // 去除首尾空格
        System.out.println("处理单个code：" + trimCode);
    }
    
    // 此处可添加文件导出、批量业务处理等逻辑
}

二、关键注意事项

请求头必须设置：前端需显式设置Content-Type: application/json，否则Spring Boot无法识别请求体中的JSON数据，会导致参数接收失败；
注解使用规范：后端必须使用@RequestBody注解绑定请求体数据，该注解仅适用于POST/PUT等包含请求体的请求方式；
数据格式匹配：前端通过JSON.stringify()将数组转为JSON字符串发送，后端直接用List<String>接收即可（Spring Boot默认通过Jackson完成JSON反序列化）；
变量名一致性：示例中后端参数名codeList无强制要求（JSON数组无key），但若前端传递的是带key的JSON对象（如{ "codeList": [...] }），后端需定义对应实体类接收。

三、常见问题与解决方案

问题现象	根因分析	解决方案
后端提示“参数未找到”	未使用`@RequestBody`注解，或请求头未设置JSON格式	1. 添加`@RequestBody`注解；2. 前端设置`Content-Type: application/json`
接收到的List为空	前端发送的数据格式错误（如未序列化JSON）	确保用`JSON.stringify()`处理数组后再发送
反序列化异常	前端数据结构与后端接收类型不匹配（如传递对象数组但后端用`List<String>`接收）	统一前后端数据结构，对象数组需后端定义对应实体类接收
请求被拦截/跨域	后端未配置跨域，或请求路径错误	1. 配置Spring Boot跨域过滤器；2. 核对请求地址前缀`prefix`是否正确

四、最佳实践建议

优先选择JSON格式传参：对于数组、对象列表等复杂数据，JSON格式比表单、查询参数更易维护，且支持嵌套结构；
增加数据校验：前端发送前校验数组非空，后端接收后校验数据合法性（如非空、格式校验），避免空指针或业务异常；
调试技巧：通过浏览器开发者工具（Network面板）查看请求体内容，或使用Postman模拟请求，快速定位数据格式问题；
扩展场景：若需通过GET请求传递数组，可将数组拼接为逗号分隔的字符串（如?codes=code1,code2,code3），后端接收后拆分处理。

五、总结

前端向Spring Boot后端传递List数组的核心是保证数据格式与请求头匹配：

前端以JSON字符串形式发送数组，设置Content-Type: application/json；
后端通过@RequestBody注解接收，利用Spring Boot内置的Jackson完成反序列化；
排查问题时优先校验请求头、数据格式、注解使用这三个关键点，可快速解决90%以上的传值问题。

实战指南：前端List(数组)传递给Spring Boot后端的完整实现方案 ​

一、核心实现方案：JSON格式POST请求传递数组 ​

1. 前端实现（原生JS + AJAX） ​

2. 后端实现（Spring Boot） ​

二、关键注意事项 ​

三、常见问题与解决方案 ​

四、最佳实践建议 ​

五、总结 ​