HTML CSS JS
자바스크립트 비동기 통신 Ajax를 이용해 영화진흥위원회 api 데이터 접근 (JavaScript Asynchronous communication Ajax)
wanttosleep1111
2023. 1. 21. 21:58
자바스크립트 비동기 통신 Ajax를 이용해 영화진흥위원회 api 데이터 접근
(JavaScript Asynchronous communication Ajax)
▶ 목표
- 영화진흥위원회 오픈 api에서 주간/주말 박스오피스 데이터 접근
- 자바스크립트 ajax를 이용해 사용자가 날짜를 입력하면 해당 날짜의 데이터에 맞는 영화랭킹, 영화명, 개봉일자가 나오는 테이블 출력하기
1. 영화진흥위원회 오픈 api에서 JSON 가져오기
2. ajax로 데이터 확인하기
<!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="https://code.jquery.com/jquery-3.6.3.min.js"></script>
</head>
<body>
<script>
let url = 'http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchWeeklyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20120101'
$.ajax({
url : url,
type : 'get',
success : (res)=>{
console.log(res)
},
error : ()=>{
console.log('통신 실패')
}
})
</script>
</body>
</html>
3. 사용자로부터 날짜를 입력 받고, 날짜에 맞는 데이터를 가져와 영화랭킹, 영화명, 개봉일자가 담긴 테이블을 출력하기
<!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="https://code.jquery.com/jquery-3.6.3.min.js"></script>
</head>
<body>
<input id="date">
<button id="btn">데이터 가져오기</button>
<script>
$('#btn').click(()=>{
let date = $('#date').val()
// 백틱 이용
let url = `http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchWeeklyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=${date}`
$.ajax({
url : url,
type : 'get',
success : (res)=>{
console.log(res)
let list = res.boxOfficeResult.weeklyBoxOfficeList
// 테이블 생성 후 1행 랭킹, 제목, 개봉일자
let movieTable = document.createElement('table')
let tr1 = document.createElement('tr')
let ranking = document.createElement('td')
let name = document.createElement('td')
let date = document.createElement('td')
ranking.innerText = '랭킹'
name.innerText = '제목'
date.innerText = '개봉일자'
tr1.appendChild(ranking)
tr1.appendChild(name)
tr1.appendChild(date)
movieTable.appendChild(tr1)
document.getElementsByTagName('body')[0].appendChild(movieTable)
// for문을 이용하여 랭킹,제목,개봉일자를 가져와 appendChild로 붙이기
for (let i = 0; i<list.length; i++ ){
let tr2 = document.createElement('tr')
let rank = document.createElement('td')
let movieNm = document.createElement('td')
let openDt = document.createElement('td')
rank.innerText = list[i].rank
movieNm.innerText = list[i].movieNm
openDt.innerText = list[i].openDt
tr2.appendChild(rank)
tr2.appendChild(movieNm)
tr2.appendChild(openDt)
movieTable.appendChild(tr2)
}
},
error : ()=>{
console.log('통신 실패')
}
})
})
</script>
</body>
</html>
