通常情况下，在我们使用ajax请求数据获得一个json格式的响应体，并且要将获得的相应数据填充到HTML页面上的时候，可能需要自己拼接字符串，这样比较麻烦，而使用模板引擎就可以帮我们省却自己拼接字符串的过程。 使用模板引擎其实就是预先写好HTML结构代码，然后调用模板引擎第三方库，自动把数据填充到这个HTML里。 今天要介绍的是artTemplate这款模板框架，下载地址：https://github.com/aui/art-template，下载完成之后解压，然后找到 lib 文件夹，把里面的 template-web.js 文件放到你的项目目录下 1. 基本使用 1.1 准备一个模板 复制代码 1 复制代码 说明： 要用script标签，必须给type属性，但是值可以随便写，只要不是 text/javascript 就可以，但是我们一般写 text/html 必须要给这个script标签加 id ，因为后面需要找到标签内的模板 模板里就是未来想显示的html代码，只是里面有些值不能写死，要根据json数据来填充，所以把不写死的数据用 <%= 属性名 %> 包起来 1.2 导入框架 复制代码 复制代码 1.3 填充模板 复制代码 1 //JSON字符串转化为对象 2 var obj = JSON.parse(xhr.responseText); 3 4 //找到tpl，并用obj对象填充,填充后的结果是一段html代码 5 var html = template('tpl',obj); 6 7 //打印看结果 8 console.log(html); 复制代码 打印结果为： 可以看到，当用了模板引擎后，会自动把JSON对应的属性值，填充到模板中同样属性名的地方，如下图 2 用模板填充JSON数组 2.1 准备模板 复制代码 1 复制代码 说明：list这个名字可以随便起，用模板填充时，把真实JSON数组传递给list就可以填充了 2.2 导入框架（跟基本使用一样） 2.3 填充模板 复制代码 1 var data = JSON.parse(xhr.responseText); 2 //参数2：list:data 意思是把data这个真实的JSON数组替换掉模板里的list值 3 var html = template('tpl', { list: data }); 4 document.querySelector('tbody').innerHTML = html; 复制代码 注意：模板里的数组叫list,那么参数2也叫list，要注意别写错。 3 使用框架内置的遍历语法 3.1 语法 复制代码 {{each list value key}} 复制代码 说明： list是自己定义的虚拟数组或对象，使用模板时用真实JSON数组或对象替换 如果list是对象，那么value就是属性值，如果list是数组，那么value得到的就是元素 如果list是对象，那么key就是属性名，如果list是数组，那么key就是下标 例： 复制代码 1 复制代码 3.2 调用模板 复制代码 1 //把报文转换为JSON数组 2 var data = JSON.parse(xhr.responseText); 3 //使用模板替换 4 var html = template('tpl', { list: data }); 5 //替换后的内容放到网页 6 document.querySelector('tbody').innerHTML = html; 复制代码https://www.cnblogs.com/linqb/p/9532552.html