1. Implementation steps

1. Static Layout 1.1 Write the desired page structure and style

2. Ajax request data 2.1 Introduction of JQ file 2.2 Setting request method, address, parameters and return information 2.3 Introduction of template 2.4 Rendering

Art-template rendering 3.1 Introducing files 3.2 Defining templates

Two, advance preparation

JQ file download: jquery.com/jquery.com/

Art-template template engine download

Net cloud API: suppression musicapi. Leanapp. Cn /

Three, static layout

Static according to their own needs to write good, here for reference

 <! - type area -- -- >
    <div id="typearea">
        <! - the title -- -- >
        <h1>The popular singer</h1>
        <! -->
        <div id="separate"></div>
        <ul>
            <! -- Picture and name -->
            <li><img src="./lib/3.jpg" alt=""><span>Components of</span></li>
            <li><img src="./lib/3.jpg" alt=""><span>Components of</span></li>
            <li><img src="./lib/3.jpg" alt=""><span>Components of</span></li>
            <li><img src="./lib/3.jpg" alt=""><span>Components of</span></li>
            <li><img src="./lib/3.jpg" alt=""><span>Components of</span></li>
        </ul>
    </div>
Copy the code
    <style>
        /* Clear the default */
        * {
            margin: 0;
            padding: 0;
        }

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

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

        /* Split line */
        #typearea #separate {
            border-top: 3px solid #c20c0c;
        }

        /* Hold data box */
        #typearea ul {
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
        }

        /* Single data box */
        #typearea ul li {
            box-sizing: border-box;
            padding-right: 10px;
            padding-top: 10px;
            flex: 20%;
            list-style: none;
        }

        / * * / picture
        #typearea ul li img {
            width: 100%;
            border: 1px solid #d2d2d0;
        }
    </style>
Copy the code

The effect

Ajax request data

Note: JQ files need to be imported

<script>
        $.ajax({
            // type: 'get',// request mode, default get can not be written
            url: 'http://musicapi.leanapp.cn/toplist/artist'./ / address
            // data: {},// do not ignore
            //dataType automatically recognizes data returned by the server. Default is JSON and write is not required
            //success: Information returned after the request was successful
            //res: data parameter returned
            success: function (res) {
                // template('art-template template id', data
                const ranking = template('template', res.list)
                $('ul').html(ranking); // Render to ul
                // console.log(ranking); // The data after each
                // console.log(res); // All data
                // console.log(res.list.artists[0].img1v1Url); // Try printing to get the image address \ name
            }
        })
    </script>
Copy the code

Net cloud suppression document says the request mode get, POST can be used, here use GET. Address is (network cloud suppression address)Musicapi.leanapp. cn/+ interface… Get the data format, you can print try

Art-template rendering

Note: You need to import the art-template file

The effect

Conclusion:

1. Write your own style that you are satisfied with, and then dig holes where you need to introduce data 2. When concatenating data, pay attention to the level of the array in which the loop data resides. This example is the second level.

Attach the general code:

<! 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 > / * remove the default * / * {margin: 0; padding: 0; } # typeArea {margin: 0 auto; width: 1200px; /* background-color: cadetblue; # typeArea h1 {font-weight: 400; } /* separate */ # 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> <! -- Template engine --> <! <script id="template" type="text/ HTML "> <! -- each: loop --> <! -- Artists: array of loops --> <! -- item is an alias for $value --> <! {{each artist item index}} <! Insert the static step and comment out the previous static step --> <! If you need to change the data dynamically, use curly braces. -- Here is an array containing objects, using. Grammar - > < li > < img SRC = "{{item. Img1v1Url}}" Alt = "" > < span > {{item. The name}} < / span > < / li > {{/ each}} <! </script> </head> <body> <! <div id=" typeArea "> <! -- Title --> <h1> </h1> <! <div id="separate"></div> <ul> <! -- Picture and name --> <! - < li > < img SRC = ". / lib / 3. JPG "Alt =" "> < span > shanzhu < / span > < / li > < li > < img SRC =".. / lib / 3. JPG "Alt =" "> < span > shanzhu < / span > < / li > < li > < img SRC = ". / lib / 3. JPG "Alt =" "> < span > shanzhu < / span > < / li > < li > < img SRC =".. / lib / 3. JPG "Alt =" "> < span > shanzhu < / span > < / li > < li > < img SRC = ". / lib / 3. JPG "Alt =" "> < span > shanzhu < / span > < / li > -- > < / ul > < / div > < script > $. Ajax ({/ / type: 'get', / / requests, the default get can not write a url: 'http://musicapi.leanapp.cn/toplist/artist', / / address / / data: {},// dataType automatically recognizes data returned by the server, default JSON, no write //success: the request returned information //res: returned data parameter success: Function (res) {// template(' id', data) const ranking = template('template', res.list) $('ul').html(ranking); // render to ul // console.log(ranking); Console. log(res); Img1v1Url); // All data // console.log(res.list.artists[0].img1v1url); }}) </script> </body> </ HTML >Copy the code