Ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src = "./jquery-3.7.1.min.js"></script>
</head>
<body>
<button onclick="getData()">
Get data🌷
</button>
<script>
let movieUrl = 'https://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=b5b8ecd400820b2b17319c093260ce60&targetDt=20231001';
//Jquery를 통한 비동기 통신
const getData=()=>{
$.ajax({
//어떤방식으로 통신할 건지
type: 'get',
//어디랑 통신할 건지
url : movieUrl,
//통신에 선공핶을때 실행할 로직
//통산어 시류ㅐ했을때 실행할 로직
success : (response)=>{
//response => 응답 데이터
console.log(response.boxOfficeResult.dailyBoxOfficeList[0].movieNm);
let movieList = response.boxOfficeResult.dailyBoxOfficeList;
console.log(movieList[0].rank,movieList[0].movieNm,movieList[0].openDt
);
for(let i=0;i<10;i++){
console.log(movieList[i].rank,movieList[i].movieNm,movieList[i].openDt
);
}
},
for(let i of movieList){
console.log(i.rank,i.movieNm,i.openDt);
}
movieList.forEach((element)=>{
console.log(element.rank,element.movieNm,e.openDt);
})
//통신에 실폐했을때 실행할 도착
error : ()=>{},
})
}
</script>
</body>
</html>Fetch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src ="./jquery-3.7.1.min.js"></script>
</head>
<body>
<button onclick="getData()">Get data 🍕</button>
<script>
let movieUrl = 'https://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=b5b8ecd400820b2b17319c093260ce60&targetDt=20231001';
const getData = ()=>{
fetch(movieUrl)
.then(res=>res.json())
.then((data)=>{
console.log(data.boxOfficeResult.dailyBoxOfficeList);
let movieList = data.boxOfficeResult.boxOfficeResult;
console.log(movieList);
for(let i=0;i<10;i++){
console.log(movieList[i].rank,movieList[i].movieNm,movieList[i].openDt
);}
for(let i of movieList){
console.log(i.rank,i.movieNm,i.openDt);
}
})
.catch(()=>{})
}
</script>
</body>
</html>
열심히 공부합시다! The best is yet to come! 💜