前提：我们在使用ajax的时候，有时候得到数据之后需要拼接成Html字符串输出，比较麻烦。我们使用js引擎可以省略拼接字符串的过程。
需求：页面新建一个表格与加载数据按钮，点击按钮，查询数据库，表格根据得到的数据信息动态的生成行和列显示数据。
步骤：
1.我们需要新建html页面，并将基本样式写出。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table{
width: 400px;
border-collapse: collapse;
margin: 0 auto;
}
th,td{
border: 1px solid #000;
padding: 10px;
}
input{
display: block;
height:40px;
margin: 50px auto;
}
</style>
</head>
<body>
<input type="button" value="加载数据" id="btn">
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>成绩</th>
</tr>
</thead>
<tbody id="tb">
</tbody>
</table>
</body>
</html>输出样式为：
2. html页面head部分导入 ‘template-web.js’ 模板框架。
3.导入模板框架后，在head部分准备模板。
注：
要用script标签,
text/javascript
就可以。
id
。
在模板中，属性值需要用<%= %>包起来，js代码需要用<% %>包起来。
代码示例:
<!-- 导入模板引擎 -->
<script src="../template-web.js"></script>
<!-- 准备模板 -->
<script type="text/html" id="tpl">
<!-- 使用框架内置对象遍历方法-->
{{each list value}}
<tr>
<!-- 遍历 value中的值 -->
{{each value val}}
<td> <%= val %></td>
{{/each}}
</tr>
{{/each}}
</script>4.新增script标签，用来获取后端数据，注：获得数据的代码与创建模板的代码不能写在同一个<script></script>标签中，最好写在html标签后面。代码示例:
<script>
// 获得按钮元素并注册点击事件
document.getElementById('btn').onclick = function(){
// 使用ajax获取后端元素
// 创建元素
var xhr = new XMLHttpRequest();
// 创建请求行，使用get请求，请求路径标识为data.php
xhr.open('get','./data.php');
// 发送请求，即创建请求体
xhr.send();
// 监听响应。onload 有兼容性问题，ie8之前不能使用，要兼容ie8之前的版本，可以使用onreadystatechange,
// 也可以导入json2.js框架用来处理兼容
xhr.οnlοad=function(){
// 获得响应数据，转换成js的数组格式
var arr = JSON.parse(xhr.responseText);
// 调用template函数，填充模板，'tpl'为模板id,{list:arr}为传入的数据为数组
var html = template('tpl',{list:arr});
// 将生成的html格式添加到tbody结构上
document.getElementById('tb').innerHTML += html;
}
}
</script>5.后端php代码示例：
<?php
//连接数据库
$link = mysqli_connect('127.0.0.1','root','root','test');
// 准备sql
$sql = "select *from students";
// 得到结果
$result = mysqli_query($link,$sql);
//转换成数组
$data = mysqli_fetch_all($result,1);
//转换成JSON字符串
echo json_encode($data);
?>6.完成，我们可以看到点击“加载数据”按钮时，动态的生成了表格行列，并带出数据。
