第八章 ajax - 6.二次封装 - 《Javascript 基础知识》

http.js
index.js(调用）
网易.html

http.js

var baseUrl="http://192.168.4.18:3000/"
function ajax({
    url,
    method="get",
    success
}){
    var xhr=new XMLHttpRequest()
    xhr.open(method,url=baseUrl+url,true);
    xhr.send();
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4 && xhr.status==200){
            var res=JSON.parse(xhr.responseText);
            success(res);
        }
    }
}
function httpAlbum(callback){
    ajax({
        url:"top/album",
        success:res=>{
            callback(res)
        }
    })
}
function handleData(res){
    res.albums.splice(0,3).forEach(item=>{
        console.log(item)
       var html=`
       <a href="detail.html?id=${item.id}"
         <div class="box2">
          <img src=${item.picUrl}>
          <p class="p2">${item.name}</p>
          <p class="p1">${item.artist.name}</p>
          </div> 
          </a>
    `
    $(".content").append(html)
    })
}

index.js(调用）

// window.onload=function(){
    httpAlbum(handleData)
// }

网易.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="index.js"></script>
    <style>
        .box2{
            width: 200px;
            height: 200px;   
        }
        .box2 img{
            width: 120px;
            height: 150px;
        }
        .content{
            margin: 100px auto;
            width:500px;
            display:flex;
            justify-content: space-around;
        }
        .content p{
            font-size: 10px;
        }
    </style>
</head>
<body>
        <div class="content">
        </div>
</body>
</html>