요번에는 고양이 api를 이용해보자!
api.thecatapi.com/v1/images/search
이 api는 브라우저를 새로고침할때마다 고양이 이미지가 불러지는데 각 이미지의 코드를 보면 임의의 코드, 즉 랜덤한 코드인것을 알수가 있다.
이랬던 코드가 새로고침하면
이렇게 된다! 이미지를 보면
이런식의 랜덤한 이미지가 나온다...!
이 랜덤 내용을 이해해보자!
이 이미지와 같이 고양이를 보자 버튼을 클릭하면 고양이 사진이 계속 바뀌면서 나타나는 웹 브라우저를 만들어보자!
팁: 이미지 태그의 이미지 주소 변경하는 방법
<img id="img_form_url">
위 img 의 src를 변경하는 방법
$("#img_form_url").attr("src", imgurl);
출처: https://it77.tistory.com/358 [시원한물냉의 사람사는 이야기]
기억하자!
또한
여기서 url에 접근하기위해서는 response[0]["url"]이라는점도 잊지말자
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JQuery 연습하고 가기!</title>
<!-- JQuery를 import 합니다 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
div.question-box>div {
margin-top: 30px;
}
</style>
<script>
function q1() {
$.ajax({
type: "GET",
url: "https://api.thecatapi.com/v1/images/search",
data: {},
success: function (response) {
let imgurl = response[0]["url"]
$("#img-cat").attr("src", imgurl);
}
})
}
</script>
</head>
<body>
<h1>JQuery+Ajax의 조합을 연습하자!</h1>
<hr />
<div class="question-box">
<h2>3. 랜덤 고양이 사진 API를 이용하기</h2>
<p>예쁜 고양이 사진을 보여주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
<button onclick="q1()">고양이를 보자</button>
<div>
<img id="img-cat"
src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
</div>
</div>
</body>
</html>
이와 같이 코드를 작성하면 된다~!
'웹 프로그래밍(풀스택-->python)' 카테고리의 다른 글
| 27. 파이썬 시작하기 (0) | 2021.04.16 |
|---|---|
| 26. 연습겸 복습 - 나홀로 메모장에 OpenAPI 붙여보기 (0) | 2021.04.16 |
| 24. Quiz_Ajax 연습하기(1) (0) | 2021.04.14 |
| 23. Ajax 함께 연습하기 (0) | 2021.04.13 |
| 22. Ajax 시작하기 (0) | 2021.04.13 |
