我们之前做的所有工作都是为了获取服务器的数据，不管是同源的数据还是跨域的数据。获取到数据之后，我们就需要将其在页面上展示出来。前端的界面都是由标签构成的，这种展示的过程其实最主要的就是生成 html 标签。
我们之前显示获取到的数据是使用字符串拼接成 li 标签，然后将 li 标签添加到 ul 标签的方式。这种做法有个弊端，就是当界面特别复杂的时候，使用字符串拼接的方式就会很复杂，对于后期的维护也会很困难。
下面介绍的模板引擎就可以很方便的生成 html 标签。
模板引擎的本质是：将数据和模板结合来生成 html 片段。
这里介绍一款效率很高的模板引擎：artTemplate，这个模板引擎是腾讯公司出品的开源模板引擎。
使用步骤：
1、引入 js 文件
2、定义模板
3、将数据和模板结合起来生成 html 片段
4、将 html 片段渲染到界面中
6.1、改造百度提示案例还是以百度提示词为例：
比如我想生成类型如下格式标签的代码片段：
<li> <div> <span>索引</span> <span>索引对应的值</span> </div> </li>源代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <h1>百度提示词</h1> <input type="text" placeholder="请输入关键词"> <input type="button" value="查询"> <ul></ul> </div> <script src=""></script> <script src="http://www.likecs.com/template.js"></script> <!--定义模板--> <!--1、指定type类型为type="text/html"，而不是jacascript--> <!--2、指定一个id值--> <!--3、循环遍历接收到的数据，生成html片段--> <!--each 就是循环遍历data中的数组，在百度案例里面，data中的数组是s，所以遍历s --> <!--as 是关键字，i 是索引，value是索引的值。--> <!--在代码片段中使用的时候，记得要加两个大括号来使用变量的值--> <script type="text/html"> {{each s as value i}} <li> <div> <span>结果{{i}} --- </span> <span>{{value}}</span> </div> </li> {{/each}} </script> <script> document.getElementById("btn").onclick = function () { $.ajax({ url: "http://suggestion.baidu.com/su", data: {wd: document.getElementById("txt").value}, success: function (data) { // 将数据和模板结合起来 // template 是模板引擎提供的 // 第一个参数：自定义的模板的id值 // 第二个参数：接收到的后端的数据 var html = template("myart", data); document.getElementById("uu").innerHTML = html; }, dataType: "jsonp", // 重点 jsonp: "cb" // 根据需求指定，默认为：callback }); }; </script> </body> </html> 6.2、artTemplate的常用语法示例1：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模板引擎</title> <script type="text/javascript" src="http://www.likecs.com/template.js"></script> <script type="text/html"> <h1>{{title}}</h1> {{each books as value i}} <div>{{value}}</div> {{/each}} </script> <script type="text/javascript"> window.onload = function(){ var data = { title : \'四大名著图书信息\', books:[\'三国演义\',\'水浒传\',\'西游记\',\'红楼梦\'] }; var html = template("resultTemplate",data); var container = document.querySelector("#container"); container.innerHTML = html; } </script> </head> <body> <div> </div> </body> </html>在定义的模板里面，使用的是 data 里面的属性，可以直接使用，比如 title。
示例2：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="http://www.likecs.com/template.js"></script> <script type="text/html"> {{if isAdmin}} <h1>{{title}}</h1> <h2>一共有{{count}}条数据</h2> <ul> {{each list as value i}} <li>索引 {{i + 1}} ：{{value}}</li> {{/each}} </ul> {{/if}} {{if !isAdmin}} <h1>没有任何数据</h1> {{/if}} </script> <script> window.onload = function(){ var data = { title: \'条件判断基本例子\', isAdmin: true, list: [\'文艺\', \'博客\', \'摄影\', \'电影\', \'民谣\', \'旅行\', \'吉他\'] }; data.count = data.list.length; var html = template("test",data); document.querySelector("#content").innerHTML = html; } </script> </head> <body> <div> </div> </body> </html>1、定义的模板里面也可以加条件判断语句：{{if data里面的属性}}。
2、可以将得到的数据进行处理，比如增加 count 属性，然后在定义的模板里面直接使用。