스프링프레임워크(@RequestBody 와 @ResponseBody 및 AJAX & JSON 연동)

스프링프레임워크(@RequestBody 와 @ResponseBody 및 AJAX & JSON 연동)

스프링프레임워크를 이용한 AJAX와 JSON 연동설정이 궁금하였다.

다양한 방법이 있는데, 그중 @RequsetBody와 @ResponseBody 어노테이션을 이용한 방법을 이용하였다.

@RequestBody 어노테이션이란?

• HTTP 요청의 body 내용을 자바 객체로 매핑하는 역할을 한다.

@ResponseBody 어노테이션이란?

• 자바 객체를 HTTP 요청의 body 내용으로 매핑하는 역할을 한다

즉,

@RequestBody는 HTTP헤더에서 바디로 들어오는 값을 자바객체로 받아오는 것이고,

@ResponseBody는 자바객체에서 HTTP요청으로 바디에 내용을 넣어 매핑하는 역할을한다.

쉽게말하면 수신은 @RequestBody, 전송은 @ResponseBody 라고 생각하면 된다

간단한 예제

Controller(mvcController.java)

    @ResponseBody //HTTP바디로 전송
    @RequestMapping("/signcheck")
    public String signcheck(Model model, @RequestBody String paramData  ) {
    //@RequestBody 어노테이션을 이용하여 HTTP 바디값을 스트링 paramData 로 받아온다
        
        System.out.println("체크창 접속"); //ajax로 전송된값이 url로 매핑되는지 확인
        System.out.println("반응:"+paramData);//ajax로 받아온값을 출력
​
    }

자바스크립트코드

function signup() {
        
    if (check() == false) return;
    
        var signcheck = {
​
            "id": $("#--id").val().trim(),   //trim메소드를 이용하여 공백제거
            "name": $("#--name").val().trim(),
            "pass": $("#--pass").val().trim(),
        };
        
        $.ajax({  
            url : 'signcheck',
            dataType : 'json',
            type : 'POST',
            contentType : 'application/json; charset=UTF-8',
            data : JSON.stringify(signcheck),
            
        });

테스트구동

회원가입 UI 모습

123을 벨류값으로 입력하면

컨트롤러에서 AJAX로 JSON값이 들어온것을 확인