使用art-template渲染服务器端的数据

代码示例：

<div id="content">
        <script type="text/html" id="tpl">
                <p>{{data.data["name"]}}</p>
                <img src='{{data.data["picurl"]}}' alt="">
                <audio src='{{data.data["url"]}}' controls></audio>
        </script>
    </div>
    <script >
        var box = document.getElementsByClassName('.box');
        // console.log(box);
        function ajax (options) {
            //创建ajax对象
            var xhr = new XMLHttpRequest();
            //拼接请求参数得变量
            var params = '';
            //循环用户传递进来得对象格式参数
            for (var attr in options.data) {
                //将参数转换为字符串格式
                params += attr + '=' +options.data[attr] + '&';
            }
            //将最后面的参数截取
            params = params.substr(0, params.length - 1);
            // console.log(params);
            options.url = options.url + '?' + params;
            //配置对象
            xhr.open(options.type, options.url);
            //发送请求
            xhr.send();
            xhr.onload = function () {
                var responseText = JSON.parse(xhr.responseText)
                options.success(responseText);
            }
        }
       ajax({
           type: "get",
           url: 'https://api.uomg.com/api/rand.music',
           data: {
              sort: "热歌榜", 
              format: 'json',
              
           },
           success: function (data) {    
                 var html = template('tpl', {data});
                 document.getElementById('content').innerHTML = html;    
           }
       }) 
    </script>

• 渲染对象

  直接在标签内添加需要得到的数据

<p>{{data.data["name"]}}</p>

• 渲染数组

  需要使用each遍历

    {{each data}}
    	<p>{{$value.artname}}</p>
     {{/each}}