AJAX 적용

1 minute read



영화진흥원 OPEN API 사용해보기

  1. http://www.kobis.or.kr/kobisopenapi/
  2. 회원가입후
  3. API발급
  4. 구글웹스토어 Postman다운(https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop/related?hl=ko)
  5. GET방식 url 붙여넣기 후, 발급받은 key 및 필수입력사항 세팅.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	#searchResult{
		border: 1px solid red;
		width:500px;
		height:400px;
	}
</style>
<script src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	$(document).ready(function(){
		$('#searchBtn').click(function(){
			$.ajax({
				type:'get'
				, url: 'http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json'
				, data: {
					key:  '직접발급받은키입력',
					targetDt: '20210720',
					itemPerPage : 3
				}/* 
					크로스도메인 (다른서버의 것 가져올때)
				  */
				, datatype: 'jsonp'
				, success: callback
				, error : function(){
					alert('실패')
				}
			})
		})
	})
	
	function callback(data){
		// 알아서 json형태로 날아옴  object type
		//console.log(data)
		let list = data.boxOfficeResult.dailyBoxOfficeList
		for(let i=0; i<list.length; i++){
			let movie = list[i]
			let rank = movie.rank
			let movieNm = movie.movieNm
			let movieAcc = movie.audiAcc
			
			//console.log(rank, movieNm, movieAcc)
			
			$('#searchResult').append('<h4>'+ rank + '위</h4>')
			$('#searchResult').append('<strong>' + movieNm + '</strong>(누적관객수 : ' + movieAcc + '명)')
			$('#searchResult').append('<hr>')
			
		}
		
		
	}

</script>

</head>
<body>
	<h2>일별 박스오피스 순위 조희</h2>
	검색일 : <input type="date" id="searchDate">
	<button id="searchBtn">검색</button>
	<br>
	<h4>검색결과</h4>
	<div id="searchResult"></div>
	
</body>
</html>
  
  • 자세한 파라미터 정보는 사이트




1-1. 날짜입력받아서 적용하기

  • script부분 수정
let date= $('#searchDate').val()
//'2021-07-21'


date = date.split('-').join('')
-> '20210721'

date = date.split('-').join('/')
-> '2021/07/21'



// 계속 값이 쌓이는 것을 방지하기 위해 callback함수에서 초기화 해야함
$('#searchResult').empty()
<script src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	$(document).ready(function(){
		$('#searchBtn').click(function(){
			
			
			// 입력폼에서 받은 데이터로 조회하기 
			let date= $('#searchDate').val()
			date = date.split('-').join('') //'20210720'형식으로 만들기
			
			
			$.ajax({
				type:'get'
				, url: 'http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json'
				, data: {
					key:  '직접 입력받은 키',
					//targetDt: '20210720', 
					targetDt: date,
					itemPerPage : 3
				}/* 
					크로스도메인 (다른서버의 것 가져올때)
				  */
				, datatype: 'jsonp'
				, success: callback
				, error : function(){
					alert('실패')
				}
			})
		})
	})
	
	function callback(data){
		
		// 계속 값이 쌓이는 것을 방지하기 위해 초기화
		$('#searchResult').empty()
		
		// 알아서 json형태로 날아옴  object type
		//console.log(data)
		let list = data.boxOfficeResult.dailyBoxOfficeList
		for(let i=0; i<list.length; i++){
			let movie = list[i]
			let rank = movie.rank
			let movieNm = movie.movieNm
			let movieAcc = movie.audiAcc
			
			//console.log(rank, movieNm, movieAcc)
			
			$('#searchResult').append('<h4>'+ rank + '위</h4>')
			$('#searchResult').append('<strong>' + movieNm + '</strong>(누적관객수 : ' + movieAcc + '명)')
			$('#searchResult').append('<hr>')
		}
		
		
	}

</script>




2. JSON 변환해주는 라이브러리(gson) 사용하기

  1. mvnrepository.com 접속
  2. gson검색
  3. 최신버전(버전상관없음) Files 에서 jar파일 다운로드
  4. eclipse에서 WEB-INF/lib경로 아래에 저장
  • aaController.java
//Controller파일에서 handleRequest안에서

Gson gson = new Gson();
String json = gson.toJson(board);

request.setAttribute("board", json); //공유영역 등록
  • jsp파일에서 접근가능해짐

${ board }

  • jsp에서 url로 파라미터를 넘겼을 경우 컨트롤러에서 request.getParameter( “aa” );로 받아오면 된다.