새로고침을 하지 않아도 데이터가 로드되는 비동기 통신을 배우다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="result-area">
</div>
<button id="req-button">
데이터 요청
</button>
<!-- jQuery 파일 불러오기 -->
<script src="./js/jquery-3.7.0.js"></script>
<script>
// 데이터요청 버튼 클릭 시, 동작하는 이벤트 적용해보기
$("#req-button").on("click", () => {
// alert("클릭")
let movieURL = "https://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20230621"
// $.ajax() : 비동기 통신을 지원하는 함수
$.ajax({
url: movieURL,
success: (result) => {
alert("요청성공!")
// console.log(result);
// console.log(result.boxOfficeResult);
// console.log(result.boxOfficeResult.dailyBoxOfficeList);
let movieList = result.boxOfficeResult.dailyBoxOfficeList;
// 박스오피스 순위, 영화이름, 개봉일을 콘솔창에 출력
$('div').append(`<table border="1px"></table>`)
$('table').append(
`<tr>
<th>순위</th>
<th>영화명</th>
<th>개봉일</th>
</tr>`)
for (let i = 0; i < movieList.length; i++) {
// console.log(movieList[i].rank,'/',movieList[i].movieNm,'/',movieList[i].openDt)
// console.log(`${movieList[i].rank}.${movieList[i].movieNm}(${movieList[i].openDt})`)
$('table').append(`<tr align = "center">
<td>${movieList[i].rank}</td>
<td>${movieList[i].movieNm}</td>
<td>${movieList[i].openDt}</td>
</tr>`)
};
},
error: () => {
alert("요청실패..")
}
});
})
</script>
</body>
</html>
동시에 여러가지 작업을 진행할 수 있고, 새로고침을 하지 않아도 웹 페이지 일부분에서 새로운 데이터가 로드 되는 비동기식 통신을 배우다. 비동기식 통신을 위한 제이쿼리 함수는 $.ajax( ) 이다.
이 함수를 실행시키기 위해서는 객체 key값으로 url, success가 필요하다. url의 value에는 오픈 api 링크 주소를 넣고 success에는 요청이 정상적으로 성공되면 실행될 로직을 적으면 된다. 나는 버튼을 클릭하면 2023-06-21 기준으로 일일 영화 순위를 표(table)로 만들어주는 로직을 작성했다.
'Front-End > 4. jQuery' 카테고리의 다른 글
| Ex09_카카오map.html (0) | 2023.07.03 |
|---|---|
| Ex08_포켓몬도감.html (0) | 2023.06.26 |
| Ex06_animate.html (0) | 2023.06.22 |
| Ex05_jQuery추가삭제.html (0) | 2023.06.22 |
| Ex04_입력 요소.html (0) | 2023.06.21 |
