[JavaScript/Ajax] Ajax 배열(array) 전송 (Controller에 배열 보내기)

Ajax에서 Controller에 배열(array)을 보낼 때

Ajax 옵션으로 traditional: true 를 넣으면 된다는 글들을 많이 봤는데...(사실 그냥 본 것중에는 전부 다...)

 

이 옵션 없이도 성공해서 두 방법 모두 가져왔다.

 

방법1. traditional: true 옵션을 준 경우

 

javascript 

 

var arr = {1, 2, 3}

$.ajax({
  type : 'post',
  url : '리퀘스트 매핑 값',
  data : {arr : arr},
  dataType : 'json',
  traditional: true,
  error: function(xhr, status, error){
	// 실패했을 때 처리
  },
  success : function(data){
	// 성공했을 때 처리
  }
});

 

Controller.java

1. @RequestParam의 value로 "arr"로 받는 것 유의

2. @RequestParam 없이 그냥 int[] arr 도 가능!

 

@RequestMapping(value = "리퀘스트 매핑 값", method = RequestMethod.POST)
@ResponseBody
public 리턴값 함수명(@RequestParam(value="arr") int[] array) {
    return 리턴할 것;
}

 

방법2. traditional: true 옵션을 안 준 경우 (기본값 traditional: false 의 경우)

 

javascript

var arr = {1, 2, 3}

$.ajax({
  type : 'post',
  url : '리퀘스트 매핑 값',
  data : {arr : arr},
  dataType : 'json',
  error: function(xhr, status, error){
	// 실패했을 때 처리
  },
  success : function(data){
	// 성공했을 때 처리
  }
});

 

Controller.java

1. @RequestParam의 value로 "arr[]"로 받는 것 유의!! ([] 없이 arr로 받으면 400에러 발생)

2. 그냥 int[] arr 로는 못받음!! (null로 받아요)

@RequestMapping(value = "리퀘스트 매핑 값", method = RequestMethod.POST)
@ResponseBody
public 리턴값 함수명(@RequestParam(value="arr[]") int[] array) {
    return 리턴할 것;
}

 

---

jQuery API 문서/jQuery.Ajax를 보면

traditional 옵션이란 직역해서 "전통적인 스타일의 파라미터 직렬화를 사용하냐 마느냐를 결정"하는 것이다.

(JQuery 1.4 이전까지 traditional style을 사용한 것 같고, 그 이후부터 traditional: fasle를 기본값으로 하고 원하면 설정하는 걸로..)

 

전통적인 방식은(traditional: true) arr=1&arr=2&arr=3 이렇게 파라미터가 넘어가고, 

전통적이지 않은 방식은(traditional: false) arr[]=1&arr[]=2&arr[]=3 이렇게 파라미터가 넘어간다고 한다.

(출처: jQueay API 문서/jQuery.param)

 

 

그래서 @RequestParam으로 받을 때 value부분에 []를 추가하냐 마느냐의 차이가 있었던 것 같다.

 

그래서 traditional: false일 때

1. @RequestParam의 value로 arr로 받으면 당연히 값은 arr[]로 넘어와 arr라는 파라미터가 없으니 @RequestParam의 required 속성의 기본값은 true이므로 400에러를 발생시킨 것 같다. 

2. int[] arr 로 못받았던 이유 역시 1번과 동일하게 arr라는 이름의 파라미터가 들어오지 않아서 null값이 들어온 것 같다!

 

 

 

 

혹시 틀린 부분이 있다면 댓글 달아주시면 감사하겠습니다!!