一、实现步骤

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>

效果

jquery 渲染click事件 jq渲染数据_jquery 渲染click事件

四、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。

jquery 渲染click事件 jq渲染数据_templates_02


拿到的数据格式,可以打印试试

jquery 渲染click事件 jq渲染数据_ajax_03

五、art-template渲染

注意：需要引入art-template文件

jquery 渲染click事件 jq渲染数据_jquery 渲染click事件_04

效果

jquery 渲染click事件 jq渲染数据_ajax_05

总结:

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>