기본 추가하기
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<input type="text">
<button>넣기</button>
<ul></ul>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$('button').on('click', function() {
var value = $('input').val();
$('ul').append('<li>' + value + '</li>');
$('input').val('');
$('input').focus();
})
</script>
</body>
</html>
ajax를 활용하여 영화 순위 리스트로 가져오기
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<button>영화순위보기</button>
<div>
<ol>
</ol>
</div>
<script type="text/javascript" src='js/jquery-3.4.1.min.js'></script>
<script type="text/javascript">
$('button').on('click',function(){
$.ajax({
url : 'http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=430156241533f1d058c603178cc3ca0e&targetDt=20200225',
success : function(result) {
var movieList = result.boxOfficeResult.dailyBoxOfficeList;
$('ol').empty();
for(var i=0; i<movieList.length; i++){
$('ol').append('<li>' + movieList[i].movieNm + '</li>');
}
},
error : function() {
alert('error');
}
})
});
</script>
</body>
</html>