练习题5_ajax.html 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <ul>
  10. </ul>
  11. <button id="add">添加图片</button>
  12. <div class="box"></div>
  13. <script src="./js/ajax.js"></script>
  14. <script>
  15. let oUl = document.querySelector("ul");
  16. let oBtn = document.querySelector("#add");
  17. let oBox = document.querySelector(".box");
  18. ajax("GET","./data/data1.json",function(res){
  19. let resData = res.data;
  20. // console.log(resData);
  21. let resHtml = "";
  22. resData.forEach((item)=>{
  23. resHtml += `<li>${item.jrid}:${item.levelname}</li>`
  24. })
  25. oUl.innerHTML = resHtml;
  26. });
  27. oBtn.onclick = function(){
  28. ajax("GET","https://api.thecatapi.com/v1/images/search",function(res){
  29. let resData = res[0].url;
  30. console.log(resData);
  31. let oImg = document.createElement("img");
  32. oImg.setAttribute("src",resData);
  33. oBox.appendChild(oImg);
  34. })
  35. }
  36. </script>
  37. </body>
  38. </html>