json

JSON (JavaScript Object Notation)

• 가볍고 이해하기 쉬운 데이터 형식
• 현재 AJAX 요청에서 가장 많이 사용된
• jQuery는 JSON 형식의 데이터를 쉽게 요청하고 처리 가능
• 서버에서 데이터를 JSON 형식으로 반환하면, 클라이언트에서 이를 파싱해 사용 가능

 

 

 

JSON 구조

1. 객체 (Object)

• 객체는 {}로 둘러싸인 키-값 쌍들의 집합
• 키는 문자열로, 값은 문자열, 숫자, 배열, 객체 등 다양한 데이터 형식

JSON 객체
{
	변수: 값;
}

{
  "name": "John Doe",
  "age": 30,
  "email": "john@example.com"
}

 

 

2. 배열 (Array)

• 배열은 []로 둘러싸이며, 여러 값을 쉼표로 구분해서 나열할 수 있다
• 배열의 값은 객체, 배열, 숫자, 문자열 등 여러 형식을 가질 수 있다

JSON 객체 배열
{
	{변수: 값, 변수: 값, … }
	{변수: 값, 변수: 값, … }
	...
}

{
  "employees": [
    { "name": "John", "age": 30 },
    { "name": "Jane", "age": 25 },
    { "name": "Tom", "age": 35 }
  ]
}

 

 

 

JSON 데이터 형식

1. 문자열 (String): "Hello, world!"
2. 숫자 (Number): 123, 45.67
3. 불리언 (Boolean): true, false
4. 배열 (Array): [1, 2, 3], ["a", "b", "c"]
5. 객체 (Object): {"key": "value"}
6. null: 값이 없음을 나타냄

 

 

 

 ⚒️ 예제

// WEB\jQuery Data\Ajax\03_json
exam01.html	json01.json	$.ajax() 함수를 이용한 JSON 데이터 읽기 (1)
exam02.html	json02.json	$.ajax() 함수를 이용한 JSON 데이터 읽기 (2)

 

---

 

Template 플러그인과의 연계

1. Template 플러그인 개념

• 동적으로 생성하고자 하는 요소를 미리 HTML 틀을 정의해 둔 후, 그 안의 적용할 내용을 JSON 데이터로 처리하는 jQuery 플러그인
• Ajax를 사용하면 원격지의 JSON 데이터를 페이지 이동 없이 로드 해 올 수 있다
• 이때 Ajax로 로드한 JSON 데이터의 구조와 템플릿에 정의되어있는 치환자들이 동일하다면, 바로 데이터를 전달받아 동적 요소를 생성하여 화면에 출력하도록 구성할 수 있다
• 사이트 : https://github.com/BorisMoore/jquery-tmpl/blob/master/jquery.tmpl.min.js > jquery-tmpl-master.zip 다운로드 받기=> jquery.tmpl.min.js를 사용하면 된다
• 플러그인 참조 코드 추가 <script type="text/javascript" src="../json/jquery.tmpl.min.js"></script>

 

 

2. 예

{"message" : "Hello Ajax"} 
	↓ 
$.get("data.json", {파라미터}, function(data) { 
	var temp = $("#itemTemplate").tmpl(data); 
	$("출력할 요소 CSS셀렉터").append(temp); 
}, ["json"]); 
	↓ 
<script id="itemTemplate" type="text/x-jquery-teml">
	<h1>${message}</h1> 
</script>

주의사항=> JSP 파일에서 작업을 하면 EL 표현식과 충돌이 난다

그래서 JSP 파일에서는 반드시 ""를 붙여서 사용을 해야 한다

https://discordapp.com/channels/1271289424155508798/1271289424789110870/1278533817086247004

 

 

 

 ⚒️ 예제

// WEB\jQuery Data\Ajax\03_json
exam03.html	bbs.json	게시판 틀