用JQuery调用随机猫咪图片api， 发送get请求 并更改img中src属性

index.html

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

<div class="container">
  <h1>Welcome To Random Cat Pictures</h1>
   <img id="photo" src="https:\/\/dog.ceo\/api\/img\/deerhound-scottish\/n02092002_6780.jpg" alt="">
  <button id="btn">Get Random Cat!</button>
</div>

script.js

$("#btn").click(function(){
 $.get("https://aws.random.cat/meow")
  .done(function(data){
   $("#photo").attr("src",data.file);
 })
  .fail(function(){
   console.log("Problem occured!");
 })
});

style.css

img {
  height: 200px;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

button {
  margin: 3px;
}

ylymonx.markdown

yLymONX

A Pen by liuxiaomingskm on CodePen.

License.