HTML - 도서검색
카카오개발 사이트에서 개발가이드에 도서검색에서 자료를 가져왔다. json 객체이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>도서검색</title>
<link rel="stylesheet" href="common.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.js"></script>
<style>
#books {
overflow: hidden;
width: 100%;
margin: 0px auto;
}
#top {
margin-bottom: 10px;
}
.box {
background-color: #F0EDCC;
float: left;
width : 150px;
height: 250px;
padding: 5px;
border: 3px solid #02343F;
border-radius: 10px;
margin: 4px;
color: #02343F;
text-align: center;
}
.title, .authors{
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 12px;
}
#bookInfo {
border-top: 1px dotted #02343F ;
border-bottom: 1px #02343F dotted;
color: #02343F(228, 109, 40);
margin: 10px;
text-align: center;
width: 50%;
}
button:disabled {background: black;}
</style>
</head>
<body>
<div id = "page">
<div id ="top" >
<h1>도서검색</h1>
</div>
<div id ="center" >
<!-- 도서 검색 결과 목록 -->
<center>
<div id ="bookInfo">
<input type "text" placeholder="검색어" id="query" value="쇼펜하우어">
검색수: <span id ="total"></span>권
</div>
</center>
<div id ="books"></div>
<script id="temp" type="text/x-handlebars-template">
<div class="box">
<img src ="" >
<div class ="title"></div>
<div class ="price">원</div>
<div class ="authors"></div>
</div>
</script>
<script>
Handlebars.registerHelper("getSrc", function(thumbnail){
if(thumbnail){
return thumbnail;
}else {
return "http://placehold.it/150x170";
}
});
</script>
<div id = "buttons">
<button id ="prev">이전</button>
<span id ="curpage">1</span>
<button id ="next">다음</button>
</div>
</div>
<div id ="bottom">
<h5>CopyRight 2022. 강깸 All Right Reserved.</h5>
</div>
</div>
</body>
<script>
let page=1;
let query =$("#query").val();
getBooks();
$("#query").on("keydown",function(e){
if(e.keyCode==13){
page=1;
query=$("#query").val();
getBooks();
}
});
$("#prev").on("click", function(){
page--;
getBooks();
});
$("#next").on("click", function(){
page++;
getBooks();
});
function getBooks(){
$.ajax({
type: "get",
dataType: "json",
url :"https://dapi.kakao.com/v3/search/book?target=title",
headers : {"Authorization":"KakaoAK 193051f169ac39caccb56939e29dd9a5"}, //아무나사용하지못하도록(생성한사람만사용가능)
data:{"query" : query, "size":10, "page":page},
success:function(data){
let template = Handlebars.compile($("#temp").html());
$("#books").html(template(data));
$("#total").html(data.meta.pageable_count);
$("#curpage").html(page);
if(page==1){
$("#prev").attr("disabled", true);
}else {
$("#prev").attr("disabled", false);
}
let is_end=data.meta.is_end;
if(is_end){
$("#next").attr("disabled", true);
}else {
$("#next").attr("disabled", false);
}
}
});
}
</script>
</html>
도서검색을 할수있다. 이전 다음 페이지도 넣어서 이동을 할수있다. headers 를 줘서 생성한 사람만 사용할수있도록 했다. data 는 도서목록과 10개씩 가져오게 하고, page도 가져왔다. page가 범위밖으로 벗어나지 못하도록하는 코드도 넣었다. (막줄)
댓글남기기