본문 바로가기
springboot

[springboot] HTTP 전송 데이터의 형식 JSON, 직렬화 역직렬화

by 개발LOG 2024. 4. 6.

json 구조 예시

[
 {
    "name":"김한빛",
    "age":30,
    "address":"서울시 서대문구"
 },
 {
    "name":"박출판",
    "age":25,
    "address":"서울시 종로구"
 }
]

 

키(key):값(value)

키에는 무조건 문자열만 올 수 있다. 숫자라면 "1" 이렇게 큰따옴표로 감싸줘야 한다.

 

 

json 문법 맞는지 확일할 수 있는 사이트:

https://jsonformatter.curiousconcept.com/

 

 

자바스크립트에서 ajax로 json데이터 요청 예시

<script>
$(document).ready(function () {
    	var name = $('#name').val();
        var url = $('#url').val();
        var requestData = {name:name, url:url};
        //즐겨찾기 등록 ajax 요청
        $.ajax({
            type:"POST",
            url:"/bookmark",
            contentType: "application/json",
            data:JSON.stringify(requestData),
            success: function (response) {
            	console.log("즐겨찾기 등록 완료");
            },
            error: function (xhr, status, error) {
                                console.error("Error making reservation request:", error);
                            }                    
        });
        
        //즐겨찾기 목록 조회 ajax 요청
        $.ajax({
            type:"GET",
            url:"/bookmark/list",
            success: function (responseData) {
            	const bookmarks=JSON.parse(responseData);
                bookmarks.forEach(bookmark=>{
                	console.log(bookmark.name, bookmark.url);
                });
            	
            },
            error: function (xhr, status, error) {
                                console.error("Error request:", error);
                            }                    
        });
    });
</script>

-  JSON.stringify()로 JSON 문자열로 변환 //직렬화

- 받아온 JSON문자열을 JSON.parse()로 구문분석 후 자바스크립트 객체 생성 //역직렬화

  (서버쪽에서 JSON문자열로 데이터를 보냈다면 굳이 JSON.parse로 역직렬화할 필요는 없지만 코드의 가독성과 유지보     수를 위해 명시해서 사용하는 것이 좋다.)

직렬화 역직렬화