1. 개요
- 검색어 입력시 해당 검색어에 대한 영화정보 화면에 ajax로 출력
- 항상 데이터를 사용할때는 어디까지 접근하는지 콘솔에 출력해보고 값을 이용 (양파까보기)
- console.log(data);
- console.log(data.movieListResult);
- console.log(data.movieListResult.movieList);
- 이후 for문에서 사용 : for(let i=0; i<data.movieListResult.movieList.length; i++)
2. 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>영화검색</title>
</head>
<body>
<input type="text" id="search-key" placeholder="검색어를 입력하세요." />
<button type="button" id="search-btn">검색</button> <hr>
<div class="search-area">
<div class="searchList" ></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function(){
$("#search-btn").click(function(){
const key = 'be27ed1080fe92edb17683ff3edfd787';
const keyword = $("#search-key").val();
let a= "";
alert($("#search-key").val()+"(으)로 검색합니다.");
$.ajax({
type : 'GET',
url: 'http://www.kobis.or.kr/kobisopenapi/webservice/rest/movie/searchMovieList.json?key='+key+'&movieNm='+keyword,
dataType : 'json',
success : function(data){
console.log(data)
for(let i=0; i<data.movieListResult.movieList.length; i++){
a+= '제목:'+data.movieListResult.movieList[i].movieNm+'</br>';
a+= '장르:'+data.movieListResult.movieList[i].genreAlt+'</br>';
a+= '제작:'+data.movieListResult.movieList[i].nationAlt+'</br>';
a+= '<hr>'
}
$(".searchList").html(a);
}
});
})
});
</script>
</body>
</html>