为何无法用jQuery传递简单数组？遇HTTP 400请求错误

我之前碰到过完全一样的坑！这种问题本质是后端参数绑定规则和前端传参格式不匹配——明明看着参数传过去了，但后端就是“认不出来”。结合你给出的FormData内容，咱们一步步拆解原因和解决办法：

1. 最常见的原因：参数命名的格式差异 #

你前端传的是testCaseNames[]（带方括号），但后端声明的参数是testCaseNames（不带方括号）。不同后端框架对数组参数的解析逻辑不一样：

• 比如Spring MVC这类框架，默认情况下，前端传数组参数不需要加[]，直接重复传同一个key就行（testCaseNames=sql_test&testCaseNames=test_loginFail），框架会自动把它解析成String[]；
• 但如果前端习惯了带[]的命名方式，后端又没对应配置，就会出现“参数存在但识别不到”的情况。

对应解决办法： #

• 改前端：把FormData里的testCaseNames[]改成testCaseNames，多次添加同一个key即可，示例代码：

  const formData = new FormData();
  formData.append('testCaseNames', 'sql_test');
  formData.append('testCaseNames', 'test_loginFail');
  formData.append('testCaseNames', 'test_loginSuccess');
  // 其他参数同理添加
  

• 改后端：如果不想动前端，就在后端参数上明确指定带方括号的参数名，比如Spring里这么写：

  @PostMapping("/your-api-path")
  public ResponseEntity<?> handleRequest(
      @RequestParam(value = "testCaseNames[]") String[] testCaseNames,
      // 其他参数...
  ) {
      // 业务逻辑代码
  }
  

2. 容易忽略的细节：请求Content-Type是否正确 #

虽然你用了FormData，但如果请求的Content-Type没被正确设置为multipart/form-data，后端可能会解析失败，导致参数“消失”。你可以在Chrome开发者工具的Network标签里，检查请求头的Content-Type是否包含multipart/form-data; boundary=xxx（xxx是浏览器自动生成的随机边界符）。

对应解决办法： #

前端发送请求时，不要手动设置Content-Type！比如用axios的话，直接传入FormData即可，浏览器会自动处理Content-Type和boundary：

axios.post('/your-api-path', formData)
  .then(res => console.log(res))
  .catch(err => console.error(err));

手动设置headers: {'Content-Type': 'multipart/form-data'}反而会丢失boundary信息，导致后端解析失败。

3. 特殊情况：后端参数接收方式的问题 #

如果后端是用DTO对象来接收参数（比如一个包含String[] testCaseNames字段的实体类），要确保DTO的字段名和前端传的参数名完全匹配，同时框架的参数绑定功能正常开启。比如Spring Boot要确保spring.mvc相关的自动配置没有被误关闭。

快速验证方法： #

可以用Postman或curl模拟两种格式的请求：

1. 不带方括号：testCaseNames=sql_test&testCaseNames=test_loginFail
2. 带方括号：testCaseNames[]=sql_test&testCaseNames[]=test_loginFail
   看哪种能被后端正常接收，就能快速定位是前端还是后端的配置问题。

内容的提问来源于stack exchange，提问作者user9710923