<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<title>Home</title>
</head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".searchbutton").click(function(){
//input 창에서 value 받아오기
var values = $('#searchvalue').val();
//data값이 하나가 아니기 때문에 그룹화 해서 넘길 예정입니다.
var searchWebParam = {
'query' :values ,
'size' : 5
};
//append로 결과를 보여줄 예정이기 때문에 태르를 담을 변수가 필요 해서 변수를 초기화 하여 선언 했습니다.
var searchTitle = "";
//검색에 빈공백이 없도록 하기 위한 코드 입니다.
if($('#searchvalue').val()==""){
alert("검색을 입력해 주세요");
}
//검색 API를 Ajax로 이용 하기 위한 호출
$.ajax({
//카카오에서 제공 하는 검색 url 입니다 검색 하는 항목에 따라서 주소가 달라집니다.
url : "https://dapi.kakao.com/v2/search/web",
//형식을 json으로 받을 것이기 때문에 지정하여 주었습니다.
dataType : "json",
//이것은 개발자 REST 코드를 이용 하는 법입니다. KakaoAK 까지는 동일 하지만 뒤에 키는 앱을 생성 하신뒤 키 발급한 것을 입력 하시면 됩니다.
headers: {'Authorization': 'KakaoAK RESTAPI키 '},
async: false,
type : "get",
data : searchWebParam,
success : function(r){
//데이터는 r이라는 이름으로 성공 했을시 값을 넘겨 줍니다. 데이터는 한개만 있지 않을 것이기 떄문에 for문을 이용 하여 풀어 주셔야 합니다.
$.each(r.documents, function (i, search) {
// alert();
//변수에 테이블을 미리 입력해 줍니다. a 페이지를 새창에 띄울 예정입니다.
searchTitle = "<div><a href=\"";
//search.url 이곳에는 검색한 페이지의 url이 담겨져 잇습니다.
searchTitle =searchTitle+search.url+"\"target=\"_blank\">"+i+":"+search.title+" 날짜 : "+search.datetime.substring( 0, 10 )+"</a></div>";
//html태그를 출력하기 위한 구문
$("#searchcafe").append(searchTitle);
});
},
error : function(request, status, error){
console.log("AJAX_ERROR");
}
});
});
});
</script>
<body>
<input type="text" id="searchvalue"><a href="#" class="searchbutton">검색</a>
<div id="searchcafe">
123
</div>
</body>
</html>
이 구문에서 href="#" 이라는 구문이 없으면 ajax는 자신의 페이지를 다시 호출하기 때문에 검색 결과가 리다이렉트 됩니다.
그래서 저 같은 경우엔 #으로 지정하였고 자바 컨트롤러로 이동시켜서 url를 파라미터에 넘길 수도 있지만 저 같은 경우에는 새창에 띄울 예정이기 때문에 #으로 지정하였습니다.
그리고 가장 핵심이 되는 API 키 값입니다.
headers: {'Authorization': 'KakaoAK RESTAPI키 '} 이라는 항목이 있습니다. 이 건 저대로 붙이시면 절대 검색 기능이 되지 않습니다. API의 키가 없으면 API가 작동하지 않습니다.
앱을 만들 때 여러 가지 키를 제공하였습니다.
그 키를 입력하시면 됩니다.
어디 있는지 모를 수도 있으니 안내해드리겠습니다.
내 계정에서 제가 만듦 앱이 있을 것입니다. 내 앱을 클릭하시면 여러 가지 기능을 설정할 수 있습니다.
거기서 앱 정보 테이블에 앱 키 표시를 클릭하시면 키가 발급되어 있을 것입니다. 앱을 만들지 않으셨다면 키가 없으니 만들어 주셔야 합니다.
REST API 키 값이 바로 위에서 원하는 키 값입니다.
여기도 중요한 포인트가 있습니다.
headers: {'Authorization': 'KakaoAK RESTAPI키 '}
보이시는지 모르겠지만 KakaoAK 와 RESTAPI키 중간에는 공백이 있습니다.
붙여서 코딩할 경우엔 제대로 작동하지 않습니다.
"공백"을 주셔야 합니다.
키 값을 넣어서 검색을 누르시면 검색 결과를 보실 수 있습니다.
단 , 여기서 문제가 발생하게 될 것입니다.
제가 검색을 "123"이라는걸 3번을 검색했습니다. 그리고 제일 첫 줄에 나오는 123은 일부러 확인을 위해서 html에 코드를 써 둔 것입니다.
기존에 내용도 나오고 검색 내용이 계속 append에 의해서 계속 출력하게 될 것입니다.
이 문제는 매우 간단합니다. empty() 함수를 이용하면 됩니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<title>Home</title>
</head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".searchbutton").click(function(){
//input 창에서 value 받아오기
var values = $('#searchvalue').val();
//data값이 하나가 아니기 때문에 그룹화 해서 넘길 예정입니다.
var searchWebParam = {
'query' :values ,
'size' : 5
};
$("#searchcafe").empty();
//append로 결과를 보여줄 예정이기 때문에 태르를 담을 변수가 필요 해서 변수를 초기화 하여 선언 했습니다.
var searchTitle = "";
//검색에 빈공백이 없도록 하기 위한 코드 입니다.
if($('#searchvalue').val()==""){
alert("검색을 입력해 주세요");
}
//검색 API를 Ajax로 이용 하기 위한 호출
$.ajax({
//카카오에서 제공 하는 검색 url 입니다 검색 하는 항목에 따라서 주소가 달라집니다.
url : "https://dapi.kakao.com/v2/search/web",
//형식을 json으로 받을 것이기 때문에 지정하여 주었습니다.
dataType : "json",
//이것은 개발자 REST 코드를 이용 하는 법입니다. KakaoAK 까지는 동일 하지만 뒤에 키는 앱을 생성 하신뒤 키 발급한 것을 입력 하시면 됩니다.
headers: {'Authorization': 'KakaoAK RESTAPI키'},
async: false,
type : "get",
data : searchWebParam,
success : function(r){
//데이터는 r이라는 이름으로 성공 했을시 값을 넘겨 줍니다. 데이터는 한개만 있지 않을 것이기 떄문에 for문을 이용 하여 풀어 주셔야 합니다.
$.each(r.documents, function (i, search) {
// alert();
//변수에 테이블을 미리 입력해 줍니다. a 페이지를 새창에 띄울 예정입니다.
searchTitle = "<div><a href=\"";
//search.url 이곳에는 검색한 페이지의 url이 담겨져 잇습니다.
searchTitle =searchTitle+search.url+"\"target=\"_blank\">"+i+":"+search.title+" 날짜 : "+search.datetime.substring( 0, 10 )+"</a></div>";
$("#searchcafe").append(searchTitle);
});
},
error : function(request, status, error){
console.log("AJAX_ERROR");
}
});
});
});
</script>
<body>
<input type="text" id="searchvalue"><a href="#" class="searchbutton">검색</a>
<div id="searchcafe">
123
</div>
</body>
</html>
ajax에 들어가기 전에 div 밑에 태그들을 비우 주는 것입니다.
그러면 태그 안에 모든 태그는 비워지고 append에 의해서 태그를 다시 입력하게 됩니다.
이렇게 코딩하면 검색할 때마다 검색 결과를 다시 내주게 됩니다.
보는 것과 매한가지로 div 안에 임의의 123이라는 글을 삭제하고 검색 결과를 보이게 됩니다.
나머지 블로그 검색 , 이미지 검색 , 동영상 검색 등 필요한 것들에 맞춰서 수정하여 사용하시면 kakaoAPI에서 제공하는 검색 기능을 무리 없이 진행할 수 있습니다.
저 같은 경우엔 태그를 이용하여 여러 가지 검색을 동시에 처리했습니다.
API를 이용하여 검색을 처음 해보게 되었는데 확실히 API 이용 하여 사용하는 거 더 좋은 것 같습니다.
