인천 일보 아카데미 50일차 -1- ajax - json 주고 받기 / ajax - 리턴값 body에 표로 넣기 (@RequestBody) / ajax - ResponseEntity 알아보기

• JSON이란 ?

JavaScript Object Notation의 약자

데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식입니다

 

JSON은 데이터 포맷일 뿐 통신 방법 , 프로그래밍 문법이 아니라

단순히 데이터를 표시하는 표현 방법이라고 합니다

 

 

• JSON의 특징

태그로 보다는 중괄호({}) 같은 형식으로 시작하고 , 값을 "KEY" : "Value "로 표현합니다

 

 

• ajax - json 사용

<script>
    const ajax07 = () => {
    
        const member = {
            "memberEmail": "aaa@aaa.com",
            "memberPassword": "1q2w3e",
            "memberName": "회원1",
        };
        이렇게 key , value로 값을 담은 오브젝트를 만들어주고
        ajax를 사용하여 json으로 변환해 넘겨준다
        
        $.ajax({
            type: "post", // key값 (전송방식 등)
            url: "/ajax07", // 주소값
            
            data: JSON.stringify(member),
            오브젝트로 만들어준 변수 member를 json으로 변환
            
            contentType: "application/json",
             서버에게 보내는 데이터 타입을 지정
             위에서 JSON으로 변환했기 때문에 보내는 타입도 JSON
            
            success: function (res) { // 요청이 잘 처리된 경우
                console.log("요청성공", res);
            },
            error: function () { // 요청이 실패한 경우
                console.log("요청 실패");
            }
        });
    }
</script>

이번 예시에서는 하나의 Object만 만들어 사용하였지만 , 여러가지 Object로 여러개 사용 가능하다

JSON형식에는 null  , number , string , array , object , boolean을 사용할 수 있다

 

 

• @RequestBody - 어노테이션 알아보기

전날에는 @ResponseBody를 알아봤고 오늘은 @RequestBody를 알아보겠습니다

@RequestBody는 받은 매개변수를 자바객체로 변환해줍니다

(요청방식 get - body부분이 없고 header만 있기 때문에 @ResponseBody를 사용할 수 없다)

 

정말 간단하게 요약하자면

@RequestBody = 요쳥을위해 보냄

@ResponseBody = 요청답을 return으로 응답 합니다

 

 

 

• @RequestBody - 사용해보기

    @PostMapping("/ajax07")
    public @ResponseBody MemberDTO ajax07(@RequestBody MemberDTO memberDTO){
    	MemberDTO newmember = member.Service(memberDTO);
        return newmember;
    }

@RequestBody로 Json으로 받은 값을 매개변수에 맞게 변환합니다

@ResponseBody로 다시 Json으로 변환하여 리턴해줍니다 

 

 

• ajax - List로 받은 값 표로 Body에 넣어주기

<script>
    const ajax08 = () => {
        const member = {
            "memberEmail": "aaa@aaa.com",
            "memberPassword": "1q2w3e",
            "memberName": "회원1",
        };
        오브젝트를 만들어줍니다
        
        $.ajax({
            type: "post", // key값 (전송방식 등)
            url: "/ajax08", // 주소값
            data: JSON.stringify(member),
             js object를 json으로 변환
             
            contentType: "application/json",
            서버에게 보내는 데이터 타입을 지정
            
            success: function (res) { // 요청이 잘 처리된 경우
                console.log("요청성공", res);
                const resultArea = document.getElementById('result-area');
                리턴받은 정보를 표에 담아 넣기위해
                태그를 document객체를 사용하여 변수에 담아줍니다
                
                let result = "<table>";
                for (let i in res) {
                    result += "<tr>";
                    result += "<td>" + res[i].memberEmail + "</td>";
                    result += "<td>" + res[i].memberPassword + "</td>";
                    result += "<tr>";
                }
                result += "</table>"
                변수 result에 table구조에 맞게 양식을 만들어 담아줍니다
                받아오는 정보가 List이기 때문에 for문을 사용합니다
                
                resultArea.innerHTML = result;
                넣어줄 공간인 태그의 innerHTML에 result를 넣어줍니다
            },
            error: function () { // 요청이 실패한 경우
                console.log("요청 실패");
            }
        });
    }
</script>

이거 솔직히 코드 어떻게 해석해서 작성해야할지 모르겠읍니다.....

미래의 내가 이걸보고 이해 못한다면 그것 또한 문제가 있다고 생각하는 부분....

 

 

• Controller

    @PostMapping("/ajax08")
    public @ResponseBody List<MemberDTO> ajax08(@RequestBody MemberDTO memberDTO){
        List<MemberDTO> memberDTOList = memberService.list();
        memberDTOList.add(memberDTO);
        return memberDTOList;
    }

@RequestBody를 사용하여 받아오는 Json타입의 객체를 매개변수에 맞게 변환합니다

@ResponseBody를 사용하여 서버에서 받아온 List정보를 Json타입으로 변환하여 리턴합니다

 

 

• ResponseEntity - 알아보기

스프링에서 제공하는 클래스 / 404 , 500 에러코드등을 ajax에서 핸들링할 수 있다

 

 

• ResponseEntity - 사용해보기

    @PostMapping(value = "/ajax09")
    public ResponseEntity ajax09(@ModelAttribute MemberDTO memberDTO){
        return new ResponseEntity<>(memberDTO, HttpStatus.NOT_FOUND);
    }

ResponseEntity는 리턴타입을 굳이 지정하지 않는다

지정하는 상황도 있지만 지정해야하는 상황이 아니라면 굳이...

 

 

예시로 사용된 Controller에서는 무조건 에러코드404를 return합니다

return 하는 방식이 조금 특이합니다 생성자로 리턴을 하고

(memberDTO , HttpStatus.NOT_FOUND)를 사용하여 

객체와 error코드를 리턴합니다

 

또한 객체로 리턴받은 값은 잘 전달되었네요

 

 

• ResponseEntity - Map넘기기

Controller

객체를 받고 받은 객체를 Map에 넣어주며 전달하겠습니다

Map을 사용하는 이유는 List를 사용하면 요소의 타입이 모두 같아야하기 때문에

간혹 제약조건이 있지 모르지만 , Map을 사용하는 경우 요소의 타입에 상관없이

모두 담아 넘겨줄 수 있는 장점이 있습니다

    @PostMapping(value = "/ajax10")
    public ResponseEntity ajax10(@RequestBody MemberDTO member){
    @RequestBody를 사용하여 json타입으로 받은 값을 객체로 변환합니다
    
    
        List<MemberDTO> memberDTOList = memberService.list();
        Service를 통하여 List를 리턴받습니다
        
        Map<String , Object> resultMap = new HashMap<>();
        resultMap을 생성합니다
        
        resultMap.put("member" , member);
        resultMap.put("memberList",memberDTOList);
        각각의 정보를 Map에 담아줍니다
        이렇게 List로 받은 값과 객체로 받은 값을 한번에
        넘겨줄 수 있는게 요점입니다
        
        return new ResponseEntity<>(resultMap, HttpStatus.OK);
        HttpStatus.OK로 error가 아닌 정상 리턴을 진행합니다
    }

 

 

 

JSP

<script>
const ajax10 = () => {
        const member = {
            "memberEmail": "aaa@aaa.com",
            "memberPassword": "1q2w3e",
            "memberName": "회원1",
        };
        $.ajax({
            type: "post", // key값 (전송방식 등)
            url: "/ajax10", // 주소값
            data: JSON.stringify(member), // js object를 json으로 변환
            contentType: "application/json", // 서버에게 보내는 데이터 타입을 지정
            success: function (res) { // 요청이 잘 처리된 경우
                console.log("요청성공", res);
                // member에 담긴 이름 접근
                console.log ("name",res.member.memberName);
                for(let i in res.memberList){
                    console.log(res.memberList[i]);
                }
                Map을 통해 한번에 담아온 값이지만
                각각의 사용법은 맞게 사용을 진행해야합니다

            },
            error: function () { // 요청이 실패한 경우
                console.log("요청 실패");
            }
        });
    }
</script>

 

 

• 자투리

최근에는 REST API, restful api이 사용되고 body를 주고 body를 받아 넣어주는 방식을 주로 사용

이전 까지 사용한 방식은 전통적인 MVC방식

 

참고

 

[Spring] @RequestBody / @ResponseBody 어노테이션 이란?

 

JSON이란 무엇인가?