|
|
@@ -0,0 +1,40 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <ul>
|
|
|
+
|
|
|
+ </ul>
|
|
|
+ <button id="add">添加图片</button>
|
|
|
+ <div class="box"></div>
|
|
|
+ <script src="./js/ajax.js"></script>
|
|
|
+ <script>
|
|
|
+ let oUl = document.querySelector("ul");
|
|
|
+ let oBtn = document.querySelector("#add");
|
|
|
+ let oBox = document.querySelector(".box");
|
|
|
+ ajax("GET","./data/data1.json",function(res){
|
|
|
+ let resData = res.data;
|
|
|
+ // console.log(resData);
|
|
|
+ let resHtml = "";
|
|
|
+ resData.forEach((item)=>{
|
|
|
+ resHtml += `<li>${item.jrid}:${item.levelname}</li>`
|
|
|
+ })
|
|
|
+ oUl.innerHTML = resHtml;
|
|
|
+ });
|
|
|
+
|
|
|
+ oBtn.onclick = function(){
|
|
|
+ ajax("GET","https://api.thecatapi.com/v1/images/search",function(res){
|
|
|
+ let resData = res[0].url;
|
|
|
+ console.log(resData);
|
|
|
+ let oImg = document.createElement("img");
|
|
|
+ oImg.setAttribute("src",resData);
|
|
|
+ oBox.appendChild(oImg);
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
