[Spring boot] Ajax로 보낸 JSON 서버에서 받기

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

JSON.stringify() - JavaScript | MDN

 

---

공공 api에서 가져온 유기동물 객체를 그대로 서버에 넘겨줘야하는 일이 생겼다. 

 

이걸 Object 그대로 서버에 넘겨준 후 서버에서 파싱하는 방법이 있지만 이번에는 클라이언트단에서 JSON형태로 만들어 보내주기로 했다.

 

이 객체를 JSON로 변환하기 위해서는 다음과 같은 메소드가 필요하다

 

JSON.stringify()

JSON.stringify()는 JavaScript 값이나 객체를 JSON 문자열로 변환해준다. 

 

그렇다는데 무작정 사용해보자!

 

let abandonedAnimal = JSON.stringify(${abandonedAnimal});

 

해당 메서드를 사용하여 console에 찍어보면 위와같이 못생긴 형태의 JSON객체가 출력되는 걸 확인해볼 수 있다.

typeof로 확인해보면 string이 출력된다.

이렇게 하면 객체에서 JSON문자열로 파싱하기는 끝났고, ajax에 담아서 서버로 보내주기만 하면 된다.

 

$.ajax({
    type: "POST"
    , url: "/abandoned/tag"
    , contentType: "application/json"
    , data: abandonedAnimal
    , success: function(data) {
        if (data.result == 'success') {
            tagBtn.text(data.status);
            alert('성공');
        }
    }
    , error: function(e) {
        alert('찜 등록에 실패했습니다. 관리자에게 문의해주세요.');
    }
});

 

여기서 요청 방식은 GET이 아닌 다른 메소드를 사용한다. 

GET 방식은 URL에 파라미터를 직접적으로 담아서 요청하는 방식을 사용하는데, 여기서 알 수 있듯이 GET 방식은 요청을 할 때 requestBody에 담지 않는다. 물론 GET 방식에서 아예 requestBody를 사용할 수 없는 건 아니지만 정말 필요한 경우가 아니면 가급적 GET 이외에 다른 방식을 사용하자.

 

contentType에 "application/json"으로 JSON을 보낸다고 알려준다.

 

이제 클라이언트에서는 JSON 데이터를 넘겨줄 준비를 마쳤다.

이제 서버에서 받아올 준비를 해보자

 

 

@RequestBody

@PostMapping("/abandoned/tag")
	public AbandonedAnimal abandonedTag(
			@RequestBody AbandonedAnimal abandonedAnimal) {
            
            return abandonedAnimal;
}

나는 데이터를 필요한 값만 받기 위해 아래와 같이 vo객체를 만들어 받아주었다.

 

 

@RequestBody 어노테이션은 서버에서 JSON 형태의 데이터를 JAVA에서 받기 위해 사용하는 어노테이션이다.

처음에 @ResponseBody 어노테이션이랑 헷갈려서 왜 @RestController 어노테이션이랑 함께 사용하는지 이해를 못했었는데 엄연히 다른 어노테이션이다.

 

이름에서 보면 알 수 있듯이 @RequestBody 어노테이션은 '요청'을 body에 담아서 가져오기 위해 사용하며, @ResponseBody 어노테이션은 '응답'을 body에 담아서 보내주기 위해 사용한다.

@Controller 어노테이션과 달리  @RestConotroller 어노테이션에는 이미 @ResponseBody가 들어있기 때문에 해당 어노테이션을 붙여주지 않아도 된다.

 

 

이렇게 클라이언트에서 보내준 JSON 데이터를 서버에서 받아올 수 있다.

 

---

마치며

분명 @RequestBody에 관련된 내용은 한번 공부했던 건데 제대로 사용해 본 적이 없어 금새 잊어버리고 있었다. 한번 배운건 제발 바로 정리하자...