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로 역직렬화할 필요는 없지만 코드의 가독성과 유지보 수를 위해 명시해서 사용하는 것이 좋다.)
직렬화 역직렬화
'springboot' 카테고리의 다른 글
[springboot] 엔티티 int VS Integer 타입 차이 (0) | 2024.04.06 |
---|---|
[springboot] HTTP 상태 코드 및 리다이렉트 (0) | 2024.04.06 |
[springboot] 웹 브라우저가 서버와 상호작용하는 방법 (0) | 2024.04.06 |
[springboot] @ResponseBody vs ResponseEntity (0) | 2024.02.26 |
[springboot] Controller, Service, Repository 메서드명 규칙 (0) | 2024.02.20 |