728x90
AJAX
웹 페이지를 새로 고치지 않고도 비동기적으로 서버와 데이터를 교환하고 업데이트하는 데 사용됨
JSON
데이터를 교환하기 위한 경량 데이터 형식
텍스트 형식으로 구조화된 데이터를 나타내며, 주로 서버와 클라이언트 간의 데이터 교환 형식으로 사용됨
실습
JSON 데이터
[
{"name": "홍길동", "score1":50, "score2":100},
{"name": "아무무", "score1":75, "score2":82}
]
실습 1 : 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>
실습 2 : ajax() 와 JSON 데이터를 불러와 테이블로 출력 2
<!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 > Javascript' 카테고리의 다른 글
| [Javascript] onchange (화면에 썸네일 띄우기) (0) | 2023.08.18 |
|---|---|
| [Javascript] jQuery 라이브러리 (0) | 2023.06.29 |
| [Javascript] 주사위 게임 실습 (0) | 2023.06.25 |
| [Javascript] 가위바위보 실습 (0) | 2023.06.25 |
| [Javascript] 자바스크립트 이벤트 (0) | 2023.06.24 |
