art template 模板渲染数据

客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板引擎渲染数据</title>
<!--   1. 引入模板引擎-->
    <script src="template-web.js"></script>

</head>
<body>
<table id="demo"></table>
<!--2.定义一个模板 模板写在script中不会显示在html中  script type不为text/javascript就不会当作js代码运行-->
<script type="text/x-art_template" id="teml">
    {{each comments}}
    <tr>
        <td>{{$value.rate}}</td>
        <td>{{$value.title}}</td>
        <td>{{$value.url}}</td>
    </tr>
    {{/each}}
</script>
<script>
    var xhr=new XMLHttpRequest();
    xhr.open('GET','/text.php');
    xhr.responseType='json';
    xhr.send(null);
    xhr.onreadystatechange=function() {
        if (this.readyState == 4) {
            var data = this.response;
        }
        //3.准备模板引擎所需数据
        var context = {comments: data};
        // 4.借助模板引擎提供的API渲染数据
        var html = template('teml', context);
        console.log(html);
        //5.将渲染好的数据添加到页面上
        document.getElementById('demo').innerHTML=html;
    }

</script>
</body>
</html>

服务端

<?php
Header('Content-Type:appLication/json');
?>
[{"rate":"7.1","cover_x":1500,"title":"惊天营救","url":"https:\/\/movie.douban.com\/subject\/30314127\/","playable":false,"cover":"https://img9.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2594557845.jpg","id":"30314127","cover_y":2222,"is_new":true},{"rate":"8.2","cover_x":1935,"title":"悲惨世界","url":"https:\/\/movie.douban.com\/subject\/33417030\/","playable":false,"cover":"https://img1.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2592521688.jpg","id":"33417030","cover_y":2858,"is_new":false},{"rate":"8.3","cover_x":1500,"title":"校园情圣","url":"https:\/\/movie.douban.com\/subject\/33420285\/","playable":false,"cover":"https://img9.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2594916975.jpg","id":"33420285","cover_y":2222,"is_new":true},{"rate":"6.2","cover_x":675,"title":"恐怖之夜:噩梦电台","url":"https:\/\/movie.douban.com\/subject\/33459814\/","playable":false,"cover":"https://img9.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2592252065.jpg","id":"33459814","cover_y":1000,"is_new":true},{"rate":"8.4","cover_x":600,"title":"给我翅膀","url":"https:\/\/movie.douban.com\/subject\/30410114\/","playable":false,"cover":"https://img3.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2561160802.jpg","id":"30410114","cover_y":800,"is_new":true},{"rate":"8.3","cover_x":2000,"title":"绅士们","url":"https:\/\/movie.douban.com\/subject\/30211998\/","playable":false,"cover":"https://img9.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2592522995.jpg","id":"30211998","cover_y":3000,"is_new":false},{"rate":"7.5","cover_x":1280,"title":"温蒂妮","url":"https:\/\/movie.douban.com\/subject\/34603816\/","playable":false,"cover":"https://img3.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2583562073.jpg","id":"34603816","cover_y":1812,"is_new":false},{"rate":"7.7","cover_x":1429,"title":"误杀","url":"https:\/\/movie.douban.com\/subject\/30176393\/","playable":true,"cover":"https://img3.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2576090251.jpg","id":"30176393","cover_y":2000,"is_new":false},{"rate":"6.5","cover_x":2362,"title":"列夫·朗道:娜塔莎","url":"https:\/\/movie.douban.com\/subject\/34960201\/","playable":false,"cover":"https://img9.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2595207406.jpg","id":"34960201","cover_y":3543,"is_new":false},{"rate":"7.6","cover_x":8175,"title":"从不,很少,有时,总是","url":"https:\/\/movie.douban.com\/subject\/33411505\/","playable":false,"cover":"https://img3.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2588279882.jpg","id":"33411505","cover_y":12075,"is_new":false},{"rate":"8.3","cover_x":2000,"title":"标准之外","url":"https:\/\/movie.douban.com\/subject\/30310218\/","playable":false,"cover":"https://img9.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2556765966.jpg","id":"30310218","cover_y":2712,"is_new":false},{"rate":"7.8","cover_x":1984,"title":"饥饿站台","url":"https:\/\/movie.douban.com\/subject\/34805219\/","playable":false,"cover":"https://img3.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2566870171.jpg","id":"34805219","cover_y":2835,"is_new":false},{"rate":"8.5","cover_x":1944,"title":"黑水","url":"https:\/\/movie.douban.com\/subject\/30331959\/","playable":false,"cover":"https://img3.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2569450232.jpg","id":"30331959","cover_y":2880,"is_new":false},{"rate":"8.6","cover_x":3072,"title":"燃烧女子的肖像","url":"https:\/\/movie.douban.com\/subject\/30257175\/","playable":false,"cover":"https://img3.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2584308261.jpg","id":"30257175","cover_y":4096,"is_new":false},{"rate":"8.2","cover_x":1685,"title":"利刃出鞘","url":"https:\/\/movie.douban.com\/subject\/30318116\/","playable":false,"cover":"https://img1.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2574172427.jpg","id":"30318116","cover_y":2500,"is_new":false},{"rate":"7.0","cover_x":730,"title":"火口的两人","url":"https:\/\/movie.douban.com\/subject\/30405087\/","playable":false,"cover":"https://img3.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2556419282.jpg","id":"30405087","cover_y":1031,"is_new":false},{"rate":"8.3","cover_x":4000,"title":"理查德·朱维尔的哀歌","url":"https:\/\/movie.douban.com\/subject\/25842038\/","playable":true,"cover":"https://img9.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2578705064.jpg","id":"25842038","cover_y":5926,"is_new":false},{"rate":"7.9","cover_x":770,"title":"1\/2的魔法","url":"https:\/\/movie.douban.com\/subject\/30401849\/","playable":false,"cover":"https://img3.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2575243691.jpg","id":"30401849","cover_y":1100,"is_new":false},{"rate":"8.4","cover_x":1190,"title":"阳光普照","url":"https:\/\/movie.douban.com\/subject\/30292777\/","playable":false,"cover":"https://img3.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2570235120.jpg","id":"30292777","cover_y":1701,"is_new":false},{"rate":"7.3","cover_x":3158,"title":"狩猎","url":"https:\/\/movie.douban.com\/subject\/30182726\/","playable":false,"cover":"https://img1.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2585533507.jpg","id":"30182726","cover_y":5000,"is_new":false},{"rate":"8.0","cover_x":2589,"title":"再见,妈妈","url":"https:\/\/movie.douban.com\/subject\/34608294\/","playable":false,"cover":"https://img3.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2562967550.jpg","id":"34608294","cover_y":3838,"is_new":false},{"rate":"6.1","cover_x":2000,"title":"狩猎的时间","url":"https:\/\/movie.douban.com\/subject\/27621498\/","playable":false,"cover":"https://img3.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2592889291.jpg","id":"27621498","cover_y":2865,"is_new":true},{"rate":"7.1","cover_x":5906,"title":"天气之子","url":"https:\/\/movie.douban.com\/subject\/30402296\/","playable":false,"cover":"https://img1.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2570059839.jpg","id":"30402296","cover_y":8268,"is_new":false},{"rate":"6.9","cover_x":3000,"title":"终结者:黑暗命运","url":"https:\/\/movie.douban.com\/subject\/27109633\/","playable":true,"cover":"https://img9.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2571762536.jpg","id":"27109633","cover_y":4441,"is_new":false},{"rate":"7.3","cover_x":1013,"title":"隐形人","url":"https:\/\/movie.douban.com\/subject\/2364086\/","playable":false,"cover":"https://img9.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2582428806.jpg","id":"2364086","cover_y":1500,"is_new":false},{"rate":"8.8","cover_x":1017,"title":"多哥","url":"https:\/\/movie.douban.com\/subject\/30271841\/","playable":false,"cover":"https://img9.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2575882765.jpg","id":"30271841","cover_y":1500,"is_new":false},{"rate":"8.2","cover_x":800,"title":"7号房的礼物(土耳其版)","url":"https:\/\/movie.douban.com\/subject\/34875369\/","playable":false,"cover":"https://img9.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2596378106.jpg","id":"34875369","cover_y":1143,"is_new":false},{"rate":"7.2","cover_x":1080,"title":"冰雪奇缘2","url":"https:\/\/movie.douban.com\/subject\/25887288\/","playable":true,"cover":"https://img3.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2572847101.jpg","id":"25887288","cover_y":1543,"is_new":false},{"rate":"7.4","cover_x":1080,"title":"南方车站的聚会","url":"https:\/\/movie.douban.com\/subject\/27668250\/","playable":true,"cover":"https://img9.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2574278284.jpg","id":"27668250","cover_y":1630,"is_new":false},{"rate":"6.1","cover_x":1448,"title":"人间失格:太宰治和三个女人们","url":"https:\/\/movie.douban.com\/subject\/30364976\/","playable":false,"cover":"https://img3.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2560036863.jpg","id":"30364976","cover_y":2048,"is_new":false},{"rate":"7.6","cover_x":2025,"title":"逃离比勒陀利亚","url":"https:\/\/movie.douban.com\/subject\/27046758\/","playable":false,"cover":"https://img1.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2589768807.jpg","id":"27046758","cover_y":2925,"is_new":false},{"rate":"8.4","cover_x":1334,"title":"乔乔的异想世界","url":"https:\/\/movie.douban.com\/subject\/30170546\/","playable":false,"cover":"https://img3.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2567973073.jpg","id":"30170546","cover_y":2000,"is_new":false},{"rate":"8.1","cover_x":1742,"title":"美好年代","url":"https:\/\/movie.douban.com\/subject\/30371818\/","playable":false,"cover":"https://img3.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2593566561.jpg","id":"30371818","cover_y":2362,"is_new":false},{"rate":"8.3","cover_x":5906,"title":"少年的你","url":"https:\/\/movie.douban.com\/subject\/30166972\/","playable":true,"cover":"https://img3.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2572166063.jpg","id":"30166972","cover_y":8268,"is_new":false},{"rate":"7.4","cover_x":4939,"title":"你好世界","url":"https:\/\/movie.douban.com\/subject\/30401194\/","playable":false,"cover":"https://img1.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2594764469.jpg","id":"30401194","cover_y":6988,"is_new":false},{"rate":"7.6","cover_x":2000,"title":"红鞋子和七个小矮人","url":"https:\/\/movie.douban.com\/subject\/26820769\/","playable":false,"cover":"https://img3.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2593734431.jpg","id":"26820769","cover_y":2822,"is_new":false},{"rate":"7.1","cover_x":680,"title":"救国同盟","url":"https:\/\/movie.douban.com\/subject\/33475049\/","playable":false,"cover":"https://img9.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2565060395.jpg","id":"33475049","cover_y":1000,"is_new":false},{"rate":"8.6","cover_x":1080,"title":"极速车王","url":"https:\/\/movie.douban.com\/subject\/6538866\/","playable":false,"cover":"https://img3.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2568792942.jpg","id":"6538866","cover_y":1600,"is_new":false},{"rate":"7.5","cover_x":1385,"title":"纽约的一个雨天","url":"https:\/\/movie.douban.com\/subject\/27089612\/","playable":false,"cover":"https://img3.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2556824333.jpg","id":"27089612","cover_y":2048,"is_new":false},{"rate":"7.4","cover_x":988,"title":"头痛欲裂","url":"https:\/\/movie.douban.com\/subject\/30452121\/","playable":false,"cover":"https://img1.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2592605178.jpg","id":"30452121","cover_y":1400,"is_new":true},{"rate":"7.7","cover_x":1103,"title":"热带雨","url":"https:\/\/movie.douban.com\/subject\/30371819\/","playable":false,"cover":"https://img9.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2573124645.jpg","id":"30371819","cover_y":1654,"is_new":false},{"rate":"7.1","cover_x":1080,"title":"野性的呼唤","url":"https:\/\/movie.douban.com\/subject\/27199324\/","playable":false,"cover":"https://img3.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2583544383.jpg","id":"27199324","cover_y":1600,"is_new":false},{"rate":"7.0","cover_x":720,"title":"列夫·朗道:退变","url":"https:\/\/movie.douban.com\/subject\/34964143\/","playable":false,"cover":"https://img3.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2596414052.jpg","id":"34964143","cover_y":1080,"is_new":true},{"rate":"6.6","cover_x":1013,"title":"魔发精灵2","url":"https:\/\/movie.douban.com\/subject\/26985839\/","playable":false,"cover":"https://img9.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2581064774.jpg","id":"26985839","cover_y":1500,"is_new":false},{"rate":"6.8","cover_x":1187,"title":"抓住救命稻草的野兽们","url":"https:\/\/movie.douban.com\/subject\/30180781\/","playable":false,"cover":"https://img1.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2593860359.jpg","id":"30180781","cover_y":1701,"is_new":false},{"rate":"7.7","cover_x":5906,"title":"我和我的祖国","url":"https:\/\/movie.douban.com\/subject\/32659890\/","playable":true,"cover":"https://img3.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2567998580.jpg","id":"32659890","cover_y":8268,"is_new":false},{"rate":"5.3","cover_x":6072,"title":"梦幻岛","url":"https:\/\/movie.douban.com\/subject\/2364001\/","playable":false,"cover":"https://img1.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2584076497.jpg","id":"2364001","cover_y":9000,"is_new":false},{"rate":"8.2","cover_x":2025,"title":"我在雨中等你","url":"https:\/\/movie.douban.com\/subject\/3882427\/","playable":false,"cover":"https://img3.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2557226052.jpg","id":"3882427","cover_y":3000,"is_new":false},{"rate":"5.9","cover_x":2584,"title":"擦一擦你那满腹经纶的道貌岸然","url":"https:\/\/movie.douban.com\/subject\/32489562\/","playable":false,"cover":"https://img1.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2593834538.jpg","id":"32489562","cover_y":4032,"is_new":false},{"rate":"7.8","cover_x":3508,"title":"一报还一报","url":"https:\/\/movie.douban.com\/subject\/34935834\/","playable":false,"cover":"https://img3.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2579407660.jpg","id":"34935834","cover_y":4961,"is_new":true}]

你可能感兴趣的:(笔记)