<!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>
</head>
<body>
<button id="btn">박스오피스 데이터 가져오기</button>
<div id="movie-area">
</div>
<script src="./js/jquery-3.6.4.min.js"></script>
<script>
// jQuery에서 지원하는 ajax 구현방법
// $.ajax({
// url:"요청할 서버경로",
// type:"Get/POST",
// data:"서버에 보낼 데이터",
// dataType:"응답데이터형식(html/xml/json)",
// success:function(data){
// // 매개변수 : 서버로부터 응답받은 데이터
// console.log("요청이 성공적으로 이루어졌을 경우");
// },
// error:function(){
// console.log("요청이 성공적으로 이루어지지 않았을 경우");
// }
// })
// Open API : Open Aplication Programming interface
// -> 누구나 데이터를 사용할 수 있도록 공개된 API
// 장점 : 시간과 비용이 많이 드는 기능을 직접 구현하지 않아도
// 유용한 기능/데이터를 제공받을 수가 있다.
// 단점 : API를 서비스하는 대부분의 회사들은
// 사용자에게 인증키를 발급받게 하고 할당량을 부여
// 할당량을 초과하면 요금 부여 가능성
// 공공데이터포털, 네이버/카카오 개발자 센터, Google Developers...등등
// 영화진흥위원회 API
let movieUrl = "http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20120101";
let btn = document.getElementById("btn");
let movieArea = document.getElementById("movie-area");
let getMovieList = function name(){
// 영화정보를 비동기통신으로 요청하는 로직 구현
$.ajax({
url:movieUrl,
success:function(result){
console.log("성공!");
console.log(result);
console.log(result.boxOfficeResult.dailyBoxOfficeList);
let movieList = result.boxOfficeResult.dailyBoxOfficeList;
// 영화순위, 영화명, 개봉일만 웹 페이지에 출력
render(movieList);
},
error:function(){
console.log("에러");
}
})
}
let render = function(movieList){
let resultHTML = `
<table border="1" width="600">
<tr>
<td>순위</td>
<td>영화명</td>
<td>개봉일</td>
</tr>`;
for(let i=0; i<movieList.length; i++){
resultHTML += `
<tr>
<td>${movieList[i].rank}</td>
<td>${movieList[i].movieNm}</td>
<td>${movieList[i].openDt}</td>
</tr>
`
}
resultHTML += `</table>`;
movieArea.innerHTML = resultHTML;
}
btn.addEventListener("click", getMovieList);
</script>
</body>
</html>
댓글