우리네 장

[스프링] JSP에서 object를 가진 List를 ajax를 통해 Controller와 통신하는 방법 본문

SpringFramework

[스프링] JSP에서 object를 가진 List를 ajax를 통해 Controller와 통신하는 방법

qpmi1zm29 2021. 3. 4. 15:13

개발 하다가 알게 된 내용들 정리!

 

index 

1. jsp에서 controller로 파라미터 넘겨줄 때 사용하는 @어노테이션 종류

2. jsp에서 ajax를 사용하여 controller로 List 넘기는 방법

 

 

1. jsp에서 controller로 파라미터 넘겨줄 때 사용하는 @어노테이션 종류

구글에 찾아보면 많은 자료가 있으므로 간단하게 정리

 

1) HttpServletRequest 객체에서 가져오는 방법 

 

    HttpServletRequest.getParameter("xx")  : String type의 파라미터를 다룰 때

    HttpServletReqeust.getAttribute("yy")    :  Object type의 파라미터를 다룰 때 

 

*** 많이 사용하는 방식은 아님 ***

 

 

2) @RequestParam

 

2-1. 1:1 binding 방식

2-2. @어노테이션 생략 가능 

      String, int, long type 파라미터와 자동 매핑

2-3. binding 시 type이 맞지 않으면 바로 400 error 발생

2-4. required 속성을 true로 해놓았을 때, request에 해당 파라미터가 존재하지 않으면 400 error 발생

2-5. defaultValue 속성을 지정 가능

2-6. request 파라미터의 이름과 어노테이션의 파라미터 이름이 다를 경우에는,

      @RequestParam("request파라미터 이름") T 어노테이션 파라미터 이름 

      으로 지정하면 된다. 

      request파라미터 이름 : 프론트에서 보내는 변수의 이름

      어노테이션 파라미터 이름 : controller에서 받는 파라미터의 이름 

 

 

 

3) @ModelAttribute

 

3-1. 한 번에 여러 개의 파라미터의 binding을 수행

3-2. @어노테이션 생략 가능 

      임의의 DTO type 파라미터와 자동 매핑

3-3. binding시 파라미터의 type이 맞지 않아도 작업 계속 진행 

      반드시 BindingResult 객체 사용 필수!

      BindingResult 객체는 @ModelAttribute 뒤에 위치해야 한다. ( 자리가 정해져있음 )

3-4. Collection type의 파라미터에는 사용 불가

3-5. Model model에 따로 model.addAttribute("xx",xx) 안해도 자동으로 add 

3-6. 하나의 메소드 파라미터에 @ModelAttribute 2개 이상 사용 금지

 

 

 

4) @RequestBody ( 짝꿍 @ResponseBody )

 

프론트와 백 단에서 json형태의 데이터를 주고 받을 때 사용하는 어노테이션

객체 형태의 데이터를 주고 받기 때문에 'POST' 방식을 사용한다.

일단, 자바에는 json 이라는 타입이 존재하지 않는다.


var test = {"id" : "qpmi1zm29"};

$.ajax(

  url : "test.do",

  type : "post",

  data : JSON.stringify(test),

  contentType : "application/json",

  success : function(data){

     alert(data);

},

 error : function(e) {

     alert(e);

}

 

);


 

test라는 객체를 JSON 스트링으로 바꾸어서 controller에 전달하면,

controller에서는 해당 파라미터를 String으로만 인지하게 된다.

( http 통신을 통해 주고 받는 데이터는 사실 내부적으로 모두 String 형식으로 통신한 뒤, 적절한 type의 데이터로 가공된다. )

그래서 사실은 json 타입의 데이터라는 것을 알려주기 위해서 contentType에 "application/json"을 명시해 준다.

( @RequestBody 사용 시에 contentType을 application_form_urlEncoded 로 작성하면 error : 스프링에서 인식 X )

 

비슷하게 controller에서 json형식의 데이터를 jsp로 넘겨주기 위해서는

@ResponseBody를 사용한다.

원래 return 부분에는 view의 '경로 + 이름' 이 들어가 해당 view로 데이터를 가지고 이동했었는데,

위 어노테이션을 사용하면 호출한 jsp 쪽으로 데이터를 넘겨준다. 

 

컨트롤러에서 Map으로 받고 싶을 때는 반드시 @RequestBody 어노테이션 사용해야 한다.

 

 

2. jsp에서 ajax를 사용하여 controller로 List 넘기는 방법

 

2-1. front 단 (JSP 사용)

 

가장 중요한 점은 데이터 가공 이다. 

리스트 그대로 controller로 전달하면 안됀다.

 


 

if(length>=1) // 보낼 리스트 데이터의 길이 {

   for(var i=0; i<length; i++){

        formData += '&members[" + i + "].memberId='+$(".selected__item:eq("+ i + ") > span:eq(0).attr("membercd");

        formData += '&members[" + i + "].storeCd='+$(".selected__item:eq("+ i + ") > span:eq(0).attr("storecd");

//formData가 보낼 데이터 

     }

}


 

추가 +) 백틱을 사용하면,

members[${i}].memberId= 이런 식으로 작성 가능하다.

 

members는 서버 쪽에서 memberId와 storeCd를 속성으로 가진 DO를 의미한다.

위 처럼 get 방식으로 파라미터 데이터를 전달해 주어야 한다.

 


$.ajax(

  { url : "insert.do",

    type : "POST",

    async : false,

    data : formData,

    success : function(data){

        history.go(-1);

     },

   error : function(e){

        alert(e);

     }

 

 

)


간단하게 위와 같이 보내주었다.

상위 버전 spring에서는 stringify와 contentType을 지정해 주지 않아도 된다고 한다.

 

 

 

2-2. back 단 

 


@RequestMapping(value="insert.do")

punlic Strng test(MemberInfo list, CursVO vo, BindingResult br, HttpServeltRequest request) throws Exception {

       

                 ........... 로직 

 

     }


MemberInfo는 members라는 class의 List를 속성으로 가진 DO이다.

List를 넘겨주는 개념이기 때문에 해당 파라미터로 데이터를 전달받게 된다. 

 

formData에 추가적인 데이터를 더해주면 별도의 DO에 대한 데이터도 전달해서 받을 수 있다.

( CursVO 부분에 @ModelAttribute 생략 )