[개발] Ajax 배열 넘기기 traditional (ft. 화면에서 서버단으로 배열 넘겨받기)

안녕하세요. 소다맛사탕 입니다.

오늘은 웹 페이지를 구현할 때 자주 사용하는 ajax에서 배열로 선언된 데이터를 넘기는 방법에 대해 알아보겠습니다.

 

※ Ajax (Asynchronous JavaScript And XML)
빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나.

 원래 ajax는 비동기 화면을 구현하거나 웹 페이지 이동시 서버로의 데이터를 주고 받기위해 자주 사용하는데요.

개발을 하다보면 배열을 넘겨야 하는 상황이 발생합니다.

 

그런데...

분명히 배열을 정확히 선언해서 서버로 보냈는데...

서버에서 찍히는 값은 null 또는 빈 공백으로 들어오는 경우가 있습니다.

 

그래서 ajax에 선언해야 하는 방법중 하나가 

traditional

Ajax 옵션, Type: Boolean, default: false, 데이터에 배열을 전송할 때 데이터 직렬화를 하는 옵션.

 

사용방법

JavaScript ajax 선언(View)

var arr = ["123","가나다","abc"];
	
$.ajax({
	url: "testTraditional",
	type: "post",
	traditional: true,	// ajax 배열 넘기기 옵션!
	data: {"arrStr" : arr},
	dataType: "json",
	success: function (data) {
		console.log(data);
	},
	error:function(request,status,error){
		alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
	}
});

 

Spring MVC Java 데이터 받기(Controller)

@ResponseBody
@RequestMapping(value = "testTraditional", method = RequestMethod.POST)
public Object testTraditional(HttpSession session, HttpServletRequest req)
        throws Exception {
   Map<String, Object> resultMap = new HashMap<String, Object>();
   // ajax를 통해 넘어온 배열 데이터 선언
   String[] arrStr = req.getParameterValues("arrStr");
   try {
       if(arrStr !=null && arrStr.length > 0) {
            for(int i=0; i<arrStr.length; i++) {
               System.out.println("ajax traditional result : " + i +" : "+ arrStr[i]);
       	    }
       	    resultMap.put("result", "success");
       	} else {
      	    resultMap.put("result", "false");
      	}
    } catch (Exception e) {
        e.printStackTrace();
    }
    return resultMap;
}

---- 결과 ----

ajax traditional result : 0 : 123
ajax traditional result : 1 : 가나다
ajax traditional result : 2 : abc

 

뷰(view)단 : JavaScript에서 ajax를 이용해 배열을 선언한 데이터를 넘길때, traditional: true로 설정

서버(Controller)단 : 뷰단에서 넘어온 데이터를 Controller에서 받기위해

HttpServletRequest의 getParameterValues로 선언한 값 받기.

(참고로 getParameterValues 선언하지 않고 메서드에 String[] arrStr <= 와 같이 직접 선언해서 받아도 무방)

 

참조 : http://tcpschool.com/ajax/ajax_intro_basic