잡동사니에도 사랑을

[21.10.25] exam01(03_json) - JSON 개념 정리 및 예제 본문

JAVA_EE/AJAX

[21.10.25] exam01(03_json) - JSON 개념 정리 및 예제

luvforjunk 2021. 10. 25. 10:45
728x90
반응형

JSON 파일 로딩


- XML 데이터는 JSON에 비해 전송되는 텍스트의 양이 많기 때문에 통신량의 소모가 큰 단점이 있다.
- 이런 단점을 보완하기 위해서, Ajax에서의 응답 결과를 JSON 형식으로 사용하기도 한다.
- JSON은 javascript에서의 기본 데이터 표현기법이므로, XML과 같이 요소를 탐색해야 하는 번거로움이 
  줄어든다

 

 

/////////json01.json

 

 

 

 

////////exam01.html

//----------------------중략--------------------------
<body>
	<h1 class="title">$.ajax() 함수를 사용한 JSON데이터 읽기 (1)</h1>
	<div class="exec">
		<input type="button" value="JSON데이터 가져오기" id="mybtn" />
	</div>

	<div class="console" id="result"></div>
	
<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$('#mybtn').click(function(){
	$.ajax({
		url: '../json/json01.json',
		type: 'get',
		success: function(data){
			// alert(JSON.stringify(data));
			
			var title = data.school.subject.title;
			var time = data.school.subject.time;
			var teacher = data.school.subject.teacher;
			
			var ul = $('<ul>');
			var li1 = $('<li>').html(title);
			var li2 = $('<li>').html(time);
			var li3 = $('<li>').html(teacher);
			
			$('#result').append(ul.append(li1).append(li2).append(li3));
			// ul을 붙여줄건데, ul에 li를 안붙였으니 .append(li1).append(li2).append(li3) 붙여준다
		},
		error: function(err) {
			console.log(err);
		}
	});
});

</script>	
</body>

 

 

 

[결과]

 

728x90
반응형

'JAVA_EE > AJAX' 카테고리의 다른 글

[21.10.25] exam03(03_json) - Template 플러그인 예제(jquery-tmpl 이용)  (0) 2021.10.25
[21.10.25] exam02(03_json) - JSON 배열  (0) 2021.10.25
[21.10.21] exam05(02_xml) - (개념 정리 : SimpleDateFormat, setCharacterEncoding, trimDirectiveWhitespaces  (0) 2021.10.21
[21.10.20] exam04(02_xml)  (0) 2021.10.20
[21.10.20] exam03(02_xml)  (0) 2021.10.20
'JAVA_EE/AJAX' Related Articles more