728x90
API
1 jquery cdn
CDN은 “느린 응답속도/다운로딩 타임”을 극복하기 위한 기술
디지털화될 수 있는 모든 데이터를 CDN을 통해 전송할 수 있다.
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>
'Back-end > 웹(web)' 카테고리의 다른 글
nodejs 프레임워크 express 로 서버 설치, 설정 (0) | 2020.09.22 |
---|---|
부트스트랩 활용할 수 있는 템플릿 (0) | 2020.07.29 |
웹프로그래밍 JSP 기초 문법 정리 (0) | 2020.07.16 |
Could not publish server configuration for Tomcat v9.0 Server at localhost. Multiple Contexts have a path of "/". (0) | 2020.05.31 |
[웹] 데이터 공유와 쿠키 (0) | 2020.05.24 |
댓글