Ajax 고양이 랜덤 사진

고양이 openAPI

https://api.thecatapi.com/v1/images/search
리스트 형태이다.
0번째의 url 값이 이미지 주소가 된다.

우리가 만들것

http://spartacodingclub.shop/ajaxquiz/03

ajax코드를 가져와서

                  let imgurl = (response[0]['url'])
                  console.log(response)
                }
            })
        }

고양이를 보자 버튼을 누르고 console에 잘 찍혔는지 본다.

0번째의 url이다.

console.log(response[0]['url'])
그러면 이제 url만 들어올 것이다.

이미지 태그의 src값을 이 주소로 바꿔줘야한다.
이번 만들기의 관건
이미지 바꾸는게 어려울 것이다.
👉JQuery 이미지태그 src 바꾸기/JQuery img 태그 🔎검색

<img id="img_form_url">

이런식으로 바꿔준다고 한다.

console.log(response[0]['url'])
여기서 response[0]['url'] 이것이 url값이니까
입력값(url값)표기로 let을 쓴다.
let imgurl =response[0]['url']
이제 이미지를 나타나게 해야하니까 아까들고온것의 값을 넣는다.
$('#img-cat').attr('src',imgurl)

완성

🎈고양이 사진이 로딩되자마자 연속으로 뜨게하기

$(document).ready(function(){
	alert('다 로딩됐다!')
});

이걸 이용해보기로 하자
로딩되자마자 떠야하니까
function q1() 앞전에 붙여주기로 한다.
브라우저에서 확인해보면 alert으로 다 로딩됐다!가 뜬다.

그러면,alert대신에 q1();을 넣으면
로딩되자마자 뜰것이다.