如何将JavaScript数组传递至REST接口？contextTypeId为空问题排查

我来帮你排查这个问题，这种前端传数组后端接收为空的情况在Spring MVC里挺常见的，主要是参数序列化格式和后端解析规则不匹配导致的。咱们一步步来解决：

问题原因分析 #

你的前端代码里把数组vm.finalFilter直接作为contextTypeId的值传入请求参数，但大多数HTTP客户端（比如AngularJS的$http，或者你用的API客户端）默认会把数组序列化成以下两种格式之一：

1. 逗号分隔的字符串：contextTypeId=1,2
2. 带方括号的参数名：contextTypeId[]=1&contextTypeId[]=2

而Spring MVC默认不会自动把这两种格式解析成List<Long>类型的参数，所以后端的contextTypeId就会为空。

具体解决方案 #

方案1：调整前端参数序列化方式（推荐） #

如果是GET请求（分页场景通常用GET），我们需要让前端把数组拆成多个同名参数，即contextTypeId=1&contextTypeId=2的格式，这样Spring就能自动解析成List<Long>。

假设你用的是AngularJS（从vm的写法推测），可以手动处理参数：

// 先初始化基础参数
const requestParams = {
  page: pagingParams.page - 1,
  size: vm.itemsPerPage,
  status: ''
};

// 把数组拆成多个同名参数
vm.finalFilter.forEach(id => {
  // 如果参数已存在，就追加；否则直接赋值
  if (requestParams['contextTypeId']) {
    requestParams['contextTypeId'] = [...requestParams['contextTypeId'], id];
  } else {
    requestParams['contextTypeId'] = id;
  }
});

// 调用接口
SubscribeContext.getAllFilteredContexts(requestParams, onSuccess, onError);

如果你的API客户端支持配置参数序列化器，比如AngularJS的$httpProvider，可以全局配置让数组自动拆成多参数：

app.config(['$httpProvider', function($httpProvider) {
  $httpProvider.defaults.paramsSerializer = function(params) {
    let parts = [];
    angular.forEach(params, function(value, key) {
      if (Array.isArray(value)) {
        angular.forEach(value, function(val) {
          parts.push(encodeURIComponent(key) + '=' + encodeURIComponent(val));
        });
      } else {
        parts.push(encodeURIComponent(key) + '=' + encodeURIComponent(value));
      }
    });
    return parts.join('&');
  };
}]);

方案2：修改后端参数注解，适配前端格式 #

如果不想改前端，可以调整后端的参数注解，明确指定参数名，并兼容不同的序列化格式：

情况A：前端传多参数（contextTypeId=1&contextTypeId=2）

直接给参数加上@RequestParam注解，Spring会自动把同名的多个参数组装成List：

@Timed 
public ResponseEntity<List<Context>> getAllFilteredContexts(
    @ApiParam Pageable pageable,
    @RequestParam(value = "contextTypeId", required = false) List<Long> contextTypeId,
    @RequestParam(value = "status", required = false) String status) 
    throws URISyntaxException, JSONException { 
    // 业务逻辑
}

情况B：前端传逗号分隔字符串（contextTypeId=1,2）

如果前端只能传逗号分隔的字符串，可以先接收String类型，再手动转成List：

@Timed 
public ResponseEntity<List<Context>> getAllFilteredContexts(
    @ApiParam Pageable pageable,
    @RequestParam(value = "contextTypeId", required = false) String contextTypeIdStr,
    @RequestParam(value = "status", required = false) String status) 
    throws URISyntaxException, JSONException { 
    List<Long> contextTypeId = new ArrayList<>();
    if (contextTypeIdStr != null && !contextTypeIdStr.isEmpty()) {
        contextTypeId = Arrays.stream(contextTypeIdStr.split(","))
                              .map(Long::parseLong)
                              .collect(Collectors.toList());
    }
    // 业务逻辑
}

情况C：前端传带方括号的参数（contextTypeId[]=1&contextTypeId[]=2）

修改后端参数名，匹配带方括号的key：

@Timed 
public ResponseEntity<List<Context>> getAllFilteredContexts(
    @ApiParam Pageable pageable,
    @RequestParam(value = "contextTypeId[]", required = false) List<Long> contextTypeId,
    @RequestParam(value = "status", required = false) String status) 
    throws URISyntaxException, JSONException { 
    // 业务逻辑
}

方案3：改用POST请求，通过请求体传递参数 #

如果你的查询条件比较复杂，也可以改用POST请求，把所有参数封装成一个DTO，通过请求体传递：

后端代码：

// 定义请求DTO
public class ContextFilterRequest {
    private int page;
    private int size;
    private List<Long> contextTypeId;
    private String status;
    
    // getter和setter方法
}

@Timed 
@PostMapping("/filtered-contexts") // 修改为POST接口
public ResponseEntity<List<Context>> getAllFilteredContexts(
    @RequestBody ContextFilterRequest filterRequest) 
    throws URISyntaxException, JSONException { 
    // 转换Pageable
    Pageable pageable = PageRequest.of(filterRequest.getPage(), filterRequest.getSize());
    // 业务逻辑
}

前端代码：

const requestBody = {
  page: pagingParams.page - 1,
  size: vm.itemsPerPage,
  contextTypeId: vm.finalFilter,
  status: ''
};

// 注意这里要调用POST版本的接口
SubscribeContext.getAllFilteredContexts(requestBody, onSuccess, onError);

调试小技巧 #

在解决问题前，建议先打开浏览器的开发者工具，查看Network标签页里的请求详情：

• 如果是GET请求，看URL里的参数是否正确
• 如果是POST请求，看Request Body里的参数格式是否符合预期

这样能快速定位是前端序列化的问题，还是后端解析的问题。

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