프로그래밍

[Web] day37 : ajax() 메서드와 JSON 데이터 본문

Web/Web

[Web] day37 : ajax() 메서드와 JSON 데이터

시케 2023. 7. 5. 08:20
728x90
반응형

2023.06.27.화

ajax() 메서드와 JSON 데이터

ajax() 메서드는 "비동기처리"를 지원한다

페이지 이동없이 (별도의 페이지 호출없이),
현재 페이지에서 필요한 데이터를 바로 로드해서 작업이 가능하다

JSON 데이터는 JavaScript Object Notation(JSON)의 줄임말이다
인간이 읽을 수 있는 문서로 이루어졌으며 코딩이 더 적게 필요하고, 처리 속도가 빠른 경량 언어이기 때문에 자주 쓰인다

 

JSON 데이터

[
	{"name": "홍길동", "score1":50, "score2":100},
	{"name": "아무무", "score1":75, "score2":82}
]

ajax() 메서드로 JSON 데이터를 불러와 테이블로 출력 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax() 메서드와 JSON 데이터</title>


</head>
<body>

<script src="https://code.jquery.com/jquery-3.7.0.min.js"
	integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
	crossorigin="anonymous"></script>
<script type="text/javascript">
	$.ajax({
		type: "GET",
		url: "data01.json",
		dataType: "json",
		success: function(data){
			console.log(data);
			
			var elem = "";
			// JSON 데이터가 키-값 쌍으로 구성이 되어 있는 데이터이기 때문에 each() 메서드 활용가능
			$.each(data, function(index, obj){
				elem+="<tr>";
				elem+=("<td>"+obj.name+"</td>");
				elem+=("<td>"+obj.score1+"</td>");
				elem+=("<td>"+obj.score2+"</td>");
				elem+="</tr>";
				$('tbody').append(elem);
				
				console.log(obj.name);
				console.log(obj.score1);
				console.log(obj.score2);
			});
		},
		error: function(err){
			console.log('에러발생!');
			console.log(err.errorText);
		}
		
	});
</script>

<table border = "1">
	<thead>
	<tr>
		<th>학생이름</th><th>중간고사</th><th>기말고사</th>
	</tr>
	</thead>
	
	<tbody>
		<!-- JSON으로부터 데이터를 받아와서 화면에 출력할 예정 -->
	</tbody>
</table>

</body>
</html>

 

ajax() 메서드로 JSON 데이터를 불러와 테이블로 출력 02

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>실습01</title>
</head>
<body>
	<script src="https://code.jquery.com/jquery-3.7.0.min.js"
		integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
		crossorigin="anonymous"></script>

	<script type="text/javascript">
		$.ajax({
			type : "GET",
			url : "data02.json",
			dataType : "json",
			success : function(data) {

				console.log(data);

				// JSON 데이터가 키-값 쌍으로 구성이 되어 있는 데이터이기 때문에 each() 메서드 활용가능
				$.each(data, function(index, obj) {
					var elem = "";

					elem += ("<a href='"+obj.link+"'>");
					elem += ("<img alt='" + obj.fileName + "'");
					elem += (" src='images/" + obj.filePath + "' /></a>");

					$('div').append(elem);
				});

			},

			error : function(err) {
				console.log('에러발생!');
				console.log(err.errorText);
			}

		});
	</script>

	<div></div>

</body>
</html>

 

 

728x90
반응형

'Web > Web' 카테고리의 다른 글

[Web] day38 : 에러페이지  (0) 2023.07.31
[Web] day37 : JSP  (0) 2023.07.05
[Web] day36 : jQuery 자바스크립트 라이브러리  (1) 2023.07.05
[Web] day36 : 자바스크립트 주사위/가위바위보 예제  (0) 2023.07.04
[Web] day35 : BOM (Browser Object Model)  (0) 2023.07.04
'Web/Web' Related Articles more
Comments