Back-end/웹(web)
API을 이용한 책 검색 ,ajax, kakao api
javapp 자바앱
2020. 7. 27. 00:00
728x90
API
1 jquery cdn
CDN은 “느린 응답속도/다운로딩 타임”을 극복하기 위한 기술
디지털화될 수 있는 모든 데이터를 CDN을 통해 전송할 수 있다.
https://cdn.hosting.kr/cdn%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80%EC%9A%94/
cdn.hosting.kr
2 ajax
$.ajax({
method: "POST",
url: "some.php",
data: { name: "John", location: "Boston" }
})
.done(function( msg ) {
alert( "Data Saved: " + msg );
});
3 api 키 발급
https://developers.kakao.com/console/app/463458
4 요청 보내기
더보기
curl -v -X GET "https://dapi.kakao.com/v3/search/book?target=title" \
--data-urlencode "query=미움받을 용기" \
-H "Authorization: KakaoAK kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk"
카카오 api 가이드를 따라서 js 코드로 옮긴다.
$.ajax({ //요청
method: "GET",
url: "https://dapi.kakao.com/v3/search/book?target=title",
data: {query:"java"},
headers:{Authorization: "KakaoAK xxx"}
})
.done(function (msg) { //응답이 오면 처리
console.log(msg);
});
콘솔로 받은 object 형태 확인
5
콘솔창에서 마우스오른쪽 – >Store as Global Variable à 응답 받은 JSON을 console창에서 다루기 위해 따로 저장
data = temp1
msg.documents[0].title
6 HTML에 표시
//jquery add html
$('p').append("<span>" + msg.documents[0].title+ "</span>");
https://youtu.be/QPEUU89AOg8 참고영상
완성 HTML
<body>
<p></p>
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous">
</script>
<script>
$.ajax({ //요청
method: "GET",
url: "https://dapi.kakao.com/v3/search/book?target=title",
data: {query:"java"},
headers:{Authorization: "KakaoAK c3fb32e7f80ba611106cd50e7e1deax9x3x"}
})
.done(function (msg) { //응답이 오면 처리
console.log(msg);
console.log(msg.documents[0].title)
$('p').append("<span>" + msg.documents[0].title+ "</span>");
$('p').append("<img src='" + msg.documents[0].thumbnail+ "'</>");
});
</script>
</body>