728x90
클릭! 버튼을 누르면 jQuery의 Ajax함수가 실행된다. URL이 바뀌지도 않는다. 이게 내가 원하는 방식이다 .. 일단 이런식으로 구현은 블로그를 참조해서 가능하게 했으나, 문제는 이러한 방식은 '비어있는 div에 데이터를 집어넣는' 방식이라는 것이다. 내가 생각했던 건 고유한 템플릿을 버튼을 눌렀을 때 집어넣는 방식이다. 문제 해결에 한발짝 다가갔다는 생각이 들긴 한다. 원하는 방식대로 해결된다면 코드를 적어 둘 생각이다..
아, 해당 API는 영화진흥위원회의 9월 초 박스오피스 순위이다. 데이터 형식이라 보기에 좋지 않은 건 어쩔 수 없다.ㅎㅎ
script.js
$(function() {
$('#call').click(function() {
$('#show').html('....loading...');
$.ajax({
type: "GET",
url: "https://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchWeeklyBoxOfficeList.json?key=430156241533f1d058c603178cc3ca0e&targetDt=20200902",
success: function(data) {
$('#show').html(JSON.stringify(data));
}
})
})
})
index.html
<!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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<button id='call'>클릭!</button>
<p id='show'></p>
</body>
</html>Ajax가 적용되는 방식은, call id를 가진 클릭! 버튼을 클릭했을 때 show id를 가진 비어있는 div에 loading...을 띄운 후 kobis.or.kr의 open API를 가져와서 띄우는 방식이다. JSON의 data를 문자열 화 해서 올리는것이다.
'today i learned' 카테고리의 다른 글
| today i learned 9/11 (0) | 2020.09.13 |
|---|---|
| today i learned 9/10 Ajax + Django로 한 페이지에서 다른 html 띄우기 (0) | 2020.09.10 |
| today i learned 9/8 (0) | 2020.09.08 |
| today i learned 9/7 (0) | 2020.09.08 |
| today i learned 9/6 (0) | 2020.09.07 |
