<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>memberlist.html</title>
<link href="css/mystyle1.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<h3>회원목록</h3>
<table border="1" id="tbody">
<thead>
<tr>
<th>아이디</th>
<th>이름</th>
<th>나이</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>홍길동</td>
<td>23</td>
</tr>
<tr>
<td>b</td>
<td>임꺽정</td>
<td>32</td>
</tr>
</tbody>
</table>
</div>
<script>
const tbody = document.getElementById("tbody"); // const 어쩌고 -> 변수 명. 지정하는거임 임의로
// axios, fetch -> 백엔드로부터 데이터를 받는 라이브러리(간단하게 하는법)
let xhr = new XMLHttpRequest(); // 호출하기 위한 라이브러리
xhr.open('GET', 'http://ihongss.com/json/exam12.json') // 호출주소
xhr.send(); // 호출
// 백엔드 호출 후에 데이터가 전송 완료 되면
xhr.addEventListener('load', function(){ // Listener -> 로드되는 타이밍을 모르니까 기다리는거임
const data = JSON.parse(xhr.response) // JSON.parse(@@@) string타입을 object로 바꿈
// console.log(data);
// console.log(typeof data); // data의 타입 확인 <필수!!>
for(let tmp of data) {
tbody.innerHTML += // 이 데이터들 Listener 안에 넣어야함
"<tr>" +
`<td>${tmp.id}</td>` +
`<td>${tmp.name}</td>` +
`<td>${tmp.age}</td>` +
"</tr>"
}
});
</script>
</body>
</html>
20211208-