<!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.0.min.js"></script>
</head>
<body>
<script>
$.ajax({
type : 'get', // 요청방식 (get/post)
url : 'ex01', // 요청서버경로
data : {'id' : id}, // 전송 데이터
contentType : 'application/json; charset=utf-8', //전송데이터 정보 (형식/인코딩)
dataType : 'json',
success : function(){
alert(data) //응답 성공 시 실행 함수
},
error : function(){
alert('통신실패!❌') //응답 실패 시 실행 함수
}
})
</script>
</body>
</html>
<!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.0.min.js"></script>
</head>
<body>
<div id="mv"></div>
<!-- 주간 인기영화 순위표-->
<button onclick="getData()">영화 데이터 요청</button>
<script>
function getData(){
$.ajax({
// url -> 데이터의 주소
url : 'https://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchWeeklyBoxOfficeList.json?key=cc9286454543c0de7f1e61b8faeb379d&targetDt=20220501',
// 쿼리스트링 ? get / jsp에서 post로 설정? post
type : 'get',
success : function(res){
// 성공했다면? 내 데이터는 어디있을까? -> 매개변수
//console.log(res.boxOfficeResult.weeklyBoxOfficeList[0].movieNm)
// for(let i = 0; i<10; i++){
// console.log(res.boxOfficeResult.weeklyBoxOfficeList[i].movieNm)
// }
let data = ''
data += '<table><tr><th>순위</th><th>영화제목</th><th>개봉일자</th></tr>'
for(let i=0; i<res.boxOfficeResult.weeklyBoxOfficeList.length;i++){
let temp = res.boxOfficeResult.weeklyBoxOfficeList[i]
data += '<tr>'
data += `<td>${temp.rank}</td>`
data += `<td>${temp.movieNm}</td>`
data += `<td>${temp.openDt}</td>`
data += '</tr>'
}
data += '</table>'
$('#mv').html(data)
console.log(res)
},
error : function(){
alert('error!')
}
})
}
</script>
</body>
</html>
