728x90
<!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>Document</title>
<script src = './JS/jquery-3.6.3.min.js'></script>
</head>
<body>
<input id="year">
<button id="movieBtn">데이터 가져오기</button>
<br>
<table border="1" id="movieTable">
<tr>
<td>순위</td>
<td>영화명</td>
<td>개봉일</td>
</tr>
</table>
<script>
let url = 'http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchWeeklyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20220606'
let movieBtn = document.getElementById('movieBtn')
// 데이터 가져오기 버튼을 클릭하면 실행될 로직 시작
movieBtn.addEventListener('click', () => {
let year = document.getElementById('year').value
let url = 'http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchWeeklyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt='+ year
$.ajax({
// 1. 어디랑 통신할지(주소)
url: url,
// 2. 요청 방식
type: 'get',
// 3. 어떤 데이터, 데이터타입을 받을건지, 인코딩 어떻게 할건지 등등 필요한 것
// 4. 통신 성공 시 실행할 로직
success: (result) => {
// result : 통신 성공 시 응답데이터를 받아오는 매개변수
let movieArray = result.boxOfficeResult.weeklyBoxOfficeList;
// 데이터를 받아와 변수에 저장할거야
for (let i = 0; i < movieArray.length; i++) {
let rank = movieArray[i].rank
let movieName = movieArray[i].movieNm
let movieOpen = movieArray[i].openDt
// 순위, 영화명, 개봉일 테이블 아래에 가져온 테이블데이터 추가하기
let tr = document.createElement('tr');
document.querySelector('#movieTable').appendChild(tr);
let rankCon = document.createElement('td');
rankCon.innerHTML = rank
document.querySelector('#movieTable').appendChild(rankCon);
let MovieNmCon = document.createElement('td');
MovieNmCon.innerHTML = movieName
document.querySelector('#movieTable').appendChild(MovieNmCon);
let MovieOpenCon = document.createElement('td');
MovieOpenCon.innerHTML = movieOpen
document.querySelector('#movieTable').appendChild(MovieOpenCon);
}
},
// 5. 통신 실패 시 에러 표시
error: () => {
}
})
})// 데이터 가져오기 버튼을 클릭하면 실행될 로직 끝
</script>
</body>
</html>
728x90
'JS > 기초정리' 카테고리의 다른 글
| JS 기초 - 비동기통신 (0) | 2023.01.20 |
|---|---|
| JS 기초 - jQuery 기초문법 (0) | 2023.01.20 |
| JS 기초 - DOM 속성 / DOM 스타일 (0) | 2023.01.17 |
| JS 기초 - DOM이벤트 (0) | 2023.01.17 |
| JS 기초 - DOM객체 (0) | 2023.01.16 |