본문 바로가기
Back-end/웹(web)

API을 이용한 책 검색 ,ajax, kakao api

by javapp 자바앱 2020. 7. 27.
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 à 응답 받은 JSONconsole창에서 다루기 위해 따로 저장

 

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>

 

결과

댓글