JQ實現ajax請求網抑雲資料+art-template渲染

一、實現步驟

1.靜態佈局
1.1寫出想要的頁面架構和樣式

2.ajax請求資料
2.1引入JQ檔案
2.2設定請求方法、地址、引數、返回資訊
2.3引入模板
2.4渲染

3.art-template渲染
3.1引入檔案
3.2定義模板

二、事前準備

JQ檔案下載：https://jquery.com/
art-template模板引擎下載
網抑雲API:http://musicapi.leanapp.cn/

三、靜態佈局

靜態根據自己需求寫就好，這裡給參考

 <!-- 版心 -->
    <div id="typearea">
        <!-- 標題 -->
        <h1>熱門歌手</h1>
        <!-- 分割線 -->
        <div id="separate"></div>
        <ul>
            <!-- 圖片與姓名 -->
            <li><img src="./lib/3.jpg" alt=""><span>山竹</span></li>
            <li><img src="./lib/3.jpg" alt=""><span>山竹</span></li>
            <li><img src="./lib/3.jpg" alt=""><span>山竹</span></li>
            <li><img src="./lib/3.jpg" alt=""><span>山竹</span></li>
            <li><img src="./lib/3.jpg" alt=""><span>山竹</span></li>
        </ul>
    </div>

    <style>
        /* 清除預設 */
        * {
            margin: 0;
            padding: 0;
        }

        /* 版心 */
        #typearea {
            margin: 0 auto;
            width: 1200px;
            /* background-color: cadetblue; */
        }

        /* 標題 */
        #typearea h1 {
            font-weight: 400;
        }

        /* 分割線 */
        #typearea #separate {
            border-top: 3px solid #c20c0c;
        }

        /* 容納資料盒子 */
        #typearea ul {
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
        }

        /* 單個資料盒子 */
        #typearea ul li {
            box-sizing: border-box;
            padding-right: 10px;
            padding-top: 10px;
            flex: 20%;
            list-style: none;
        }

        /* 圖片 */
        #typearea ul li img {
            width: 100%;
            border: 1px solid #d2d2d0;
        }
    </style>

效果
在這裡插入圖片描述

四、ajax請求資料

注意：需要引入JQ檔案

<script>
        $.ajax({
            // type: 'get',//請求方式,預設get可以不寫
            url: 'http://musicapi.leanapp.cn/toplist/artist', //地址
            // data: { },//有就寫,沒有忽略
            //dataType自動識別伺服器端返回的資料,預設JSON,可不寫
            //success:請求成功返回的資訊
            //res:返回的資料引數
            success: function (res) {
                // template('art-template模板的id', 資料)，作用：把資料拼接到模板
                const ranking = template('template', res.list)
                $('ul').html(ranking); //渲染到ul
                // console.log(ranking); //出現each後的資料
                // console.log(res); //所有資料
                // console.log(res.list.artists[0].img1v1Url); //試著列印可以獲取圖片地址\名字
            }
        })
    </script>

網抑雲檔案寫著請求方式get、post都可以，這裡用get。
地址為（網抑雲地址）http://musicapi.leanapp.cn/+介面，需要什麼功能就找對應的介面，參照API。
在這裡插入圖片描述
拿到的資料格式,可以列印試試

五、art-template渲染

注意：需要引入art-template檔案

在這裡插入圖片描述

效果
在這裡插入圖片描述

總結:

1.樣式自己寫出滿意的即可,然後在需要引入資料的地方挖坑引入資料
2.拼接資料時候,要注意迴圈資料在陣列的第幾層,這裡範例的是第二層,如果是一層的可以直接res.

附上總程式碼:

<!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="./lib/jquery-1.12.2.js"></script>
    <script src="./lib/template-web.js"></script>
    <style>
        /* 清除預設 */
        * {
            margin: 0;
            padding: 0;
        }

        /* 版心 */
        #typearea {
            margin: 0 auto;
            width: 1200px;
            /* background-color: cadetblue; */
        }

        /* 標題 */
        #typearea h1 {
            font-weight: 400;
        }

        /* 分割線 */
        #typearea #separate {
            border-top: 3px solid #c20c0c;
        }

        /* 容納資料盒子 */
        #typearea ul {
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
        }

        /* 單個資料盒子 */
        #typearea ul li {
            box-sizing: border-box;
            padding-right: 10px;
            padding-top: 10px;
            flex: 20%;
            list-style: none;
        }

        /* 圖片 */
        #typearea ul li img {
            width: 100%;
            border: 1px solid #d2d2d0;
        }
    </style>
    <!-- 模板引擎 -->
    <!-- 必須寫id,ajax那個步驟參照,type選寫,主要高亮效果 -->
    <script id="template" type="text/html">
        <!-- each:迴圈 -->
    <!-- artists:迴圈的陣列 -->
    <!-- item相當於$value的別名 -->
    <!-- $index:陣列的下標 $value表示迴圈的物件 -->
    {{each artists item index}}
    <!-- 這裡把剛剛寫靜態的那步搬過來,之前的靜態就註釋掉 -->
    <!-- 需要動態變更資料的就用花括號包裹,正常參照資料即可 -->
    <!-- 這裡是陣列包含物件,用.語法 -->
    <li><img src="{{item.img1v1Url}}" alt=""><span>{{item.name}}</span></li>

    {{/each}}
    <!-- 必須要結尾 -->
    </script>
</head>

<body>
    <!-- 版心 -->
    <div id="typearea">
        <!-- 標題 -->
        <h1>熱門歌手</h1>
        <!-- 分割線 -->
        <div id="separate"></div>
        <ul>
            <!-- 圖片與姓名 -->
            <!-- <li><img src="./lib/3.jpg" alt=""><span>山竹</span></li>
            <li><img src="./lib/3.jpg" alt=""><span>山竹</span></li>
            <li><img src="./lib/3.jpg" alt=""><span>山竹</span></li>
            <li><img src="./lib/3.jpg" alt=""><span>山竹</span></li>
            <li><img src="./lib/3.jpg" alt=""><span>山竹</span></li> -->
        </ul>
    </div>

    <script>
        $.ajax({
            // type: 'get',//請求方式,預設get可以不寫
            url: 'http://musicapi.leanapp.cn/toplist/artist', //地址
            // data: { },//有就寫,沒有忽略
            //dataType自動識別伺服器端返回的資料,預設JSON,可不寫
            //success:請求成功返回的資訊
            //res:返回的資料引數
            success: function (res) {
                // template('模板的id', 資料)
                const ranking = template('template', res.list)
                $('ul').html(ranking); //渲染到ul
                // console.log(ranking); //出現each後的資料
                console.log(res); //所有資料
                // console.log(res.list.artists[0].img1v1Url); //試著列印可以獲取圖片地址\名字
            }
        })
    </script>
</body>

</html>