AngularJS传数组到后台

需求：将js中的数组传到后台（String数组，非对象数组）；
环境：前端框架AngularJS，后台框架Jersey.

简要说明

简单来说，在前端先将数组转为Json串，然后使用FormData封装要传送的数据，再使用ajax将FormData对象传往后台，后台Controller中接收FormData中的Json串，然后使用JSONArray将Json转换为String[].

• FormData
  FormData是XMLHttpRequest Level 2新添加的一个接口，我们可以通过js用一些键值对来模拟一系列表单控件（相当于在js中创建了一个表单，不知道是否可以这样理解，毕竟是可以直接将html中的表单元素生成为FormData）
  
  更具体的见：
  FormData —— 全面
  JS FormData对象 —— 讲解了三种FormData的获取方法

演示

js

$scope.relevance=function(){
    var obj=document.getElementsByName("proShortCodeArr");
    var checkValue=[];
    for(var i=0;i<obj.length;i++){
        if(obj[i].checked && obj[i].value!=null) checkValue.push(obj[i].value);
    }

    //将数组转为json串
    var projectCodeArr=angular.toJson(checkValue);
    //创建FormData，封装要传送的数据
    var fd=new FormData();
    //append方法添加键值对
    fd.append("projectCodeArr",projectCodeArr);

    //使用ajax异步请求
    var url="/api/organization/associateNewProject?organizeCode="+organizationCode;
    $http.post(url,fd, {    //使用post方法 传送formdata对象
        transformRequest: angular.identity,     //使用angular传参认证
        headers: {
            'Content-Type': undefined           //设置请求头
        }
    }).success(function (data) {
        if(data && data.statusCode == 200){
            tipService.popup.success("关联项目成功！");
            $scope.currentCooleadPop.closeWin(true);
        }else tipService.popup.success("关联项目失败！");
    }).error(function (error) {
        tipService.popup.success(error);
    })
};

这就相当于传一个表单到后台，在Spring MVC中，是可以使用注解@RequestParam获取表单中某字段的值，但因为公司使用的框架是Jersey，我尝试使用@QueryParam死活接收不到数据。最后终于找到原因，原来Jersey中要使用@FormDataParam来接收。

后台Controller

@POST
@Path("/associateNewProject")
@Produces(MediaType.APPLICATION_JSON)
@ApiOperation(value="关联新项目", notes="关联新项目", response=ResponseHelper.class, httpMethod="POST")
@ApiResponses(value={})
public Response associateNewProject(@QueryParam("organizeCode")String organizeCode, @FormDataParam("projectCodeArr") String projectCodeArr) {
    //将数组格式的json串转换为String数组
    String[] proCodeArr=(String[])JSONArray.toArray(JSONArray.fromObject(projectCodeArr),String.class);
    return ResponseHelper.ok(organizationBusiness.associateNewProject(organizeCode,proCodeArr));
}

关于json与java对象的转换，详见：json字符串与java对象互转

本文部分参考：angularJS前台传list数组，后台springMVC接收数组