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接收數組