[AJAX] ajax를 이용해 배열 형태로 보내기

 

 

비동기로 데이터를 전송할 경우 ajax를 사용하는데,
ajax를 사용할때 배열의 형태 데이터를 전송하는 방법입니다.

 

 

 

 

 

JSON 형태로 전달

---

아래의 예시와 같이, Ajax를 사용하여 Controller에 파라미터 전송 시 JSON 형태로 전달합니다.

{
  "player": "son",
  "goal": 30
}

 

 

 

 

 

여러 개의 데이터를 배열 형식으로 전달

---

만약 처리해야 될 데이터가 여러개라면 배열 형식으로 데이터를 전달할 수 있습니다.

아래와 같이 ajax에서 배열 형태의 json 데이터를 controller에 전송할 수 있습니다.

//배열 선언
var playerArray = [];

//배열에 들어갈 데이터1
var player1 = {
   "player" : "son",
   "goal"  : 30
}

//배열에 들어갈 데이터2
var player2 = {
   "player" : "kane",
   "goal"  : 45
}

//선언한 배열에 데이터를 삽입
playerArray.push(player1);
playerArray.push(player2);

//배열객체를 JSON 포맷으로 변환
var playerList = {
   "playerList" : JSON.stringify(playerArray)
}

//playerList를 ajax를 통하여 전송
$.ajax({
         type : "POST",
         url : "/playerInfo.do",
         data : playerList,
         success : function(data) {},
         error : function(e) {}
});

 

 

 

 

 

 

controller에서의 데이터 처리

---

controller에서는 아래와 같이 넘어온 데이터를 처리할 수 있습니다.

넘어온 데이터를 배열형태로 처리하거나 DTO로 담을수 있습니다.

import com.fasterxml.jackson.core.type.TypeReference;
import com.fasterxml.jackson.databind.ObjectMapper;
@RequestMapping("/playerInfo.do")
   public String playerList(@RequestParam Map<String, Object> parameters{
      
      /* playerList로 넘어온 데이터를 문자열로 변환 */
      String json = parameters.get("playerList").toString();
      ObjectMapper mapper = new ObjectMapper();
      
      //변환된 데이터를 List형태에 저장
      //JSON 파일을 Java 객체로 deserialization 하기 위해서 ObjectMapper의 readValue() 메서드를 이용
      List<Map<String, Object>> playerList = mapper.readValue(json, new TypeReference<ArrayList<Map<String, Object>>>(){});
      
      //리스트를 DTO로 받아야할 경우는 아래와 같이 사용 가능
      //List<dto> playerList = mapper.readValue(json, new TypeReference<ArrayList<dto>>(){});
      
}