思路分析
样式效果:
分析:
①实现这个效果,我们一般需要2个页面,一个html页面,用来浏览器显示;一个PHP页面,用来接收数据库数据,并且把接受来的数据返回到前端。
②这时,我们一般需要三个步骤:第一,使用ajax发送请求;第二,在PHP页面获取数据库数据,将数据库的数据返回给前端;第三,前端接收后端返回
的数据,使用模板引擎,将数据按照表格的样式显示出来。
代码实现
1、先新建demo.html文件,并且创建好表头:
代码如下:
<table border="1" align="center" cellspacing="0">
<caption><h1>学生数据管理</h1></caption>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>邮箱</th>
<th>电话</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
2、发送ajax请求到demo.php页面
<script type="text/javascript">
$.post('demo.php',function(msg){
console.log(msg); // 检测代码正确性
},'json')
</script>
此时demo.php文件返回测试代码:
<?php
echo 123;
?>
3、demo.php操作数据
<?php
// echo 123;
// 链接MySQL服务器
$conn = mysqli_connect('localhost','root','root');
// 选择要操作的数据库
mysqli_select_db($conn,'study');
// 设置字符集
mysqli_query($conn,'set names utf8');
// 拼接SQL语句
$sql = "select * from hf";
// 执行SQL语句
$result_obj = mysqli_query($conn,$sql);
$arr = [];
while($row=mysqli_fetch_assoc($result_obj)) {
array_push($arr,$row); // 将数组一条一条追加到$arr后面
}
echo json_encode($arr);
// 关闭MySQL链接
mysqli_close($conn);
?>
4、前端接收返回的数据,转化为json格式
<script type="text/javascript">
$.post('demo.php',function(msg){
console.log(msg); // 测试
},'json')
</script>
5、使用模板引擎,将数据添加到table中
// 引入jQuery和template库文件
<script src="./jquery.1.11.js"></script>
<script src="./template-web.js"></script>
//定义模板
<script type="text/template" id="tpl">
<% for ( i = 0; i < list.length; i++) {%>
<tr>
<td><%=list[i].sno%></td>
<td><%=list[i].sname%></td>
<td><%=list[i].sage%></td>
<td><%=list[i].sgender%></td>
<td><%=list[i].semail%></td>
<td><%=list[i].stel%></td>
</tr>
<% } %>
</script>
<script type="text/javascript">
$.post('demo.php',function(msg){
console.log(msg);
// 转化为二维数组
var list = { "list": msg};
// 调用模板
var html = template('tpl',list);
// 添加到tbody中
$('tbody').html(html);
},'json')
</script>
结果如下:
总结
artTemplate模板引擎
基本使用步骤:
- 使用script标签引入arttemplate库文件
- 定义标签,用来显示最终解析好的模板信息
- 定义模板和模板中所需数据。
① 定义要显示在模板中的数据,必须是 json 对象
② 使用script标签定义模板,type="text/template" id="tpl",并且使用 <%=key%> 将所有数据位置标记出来 - 调用template函数,解析模板
- 将解析好的模板字符串填充到事先定义好的标签中(显示到网页上)
<head>
<--1\使用script标签引入arttemplate库文件-->
<script type="text/javascript" src="./template-web.js"></script>
</head>
<body>
<--2\定义标签,用来显示最终解析好的模板信息-->
<div id="d"></div>
<--4/调用template函数,解析模板-->
<script type="text/template" id="tpl">
我是<%=name%>,今年<%=age%>岁
</script>
<--3\定义模板和模板中所需数据-->
<script type="text/javascript">
// 定义数据
var info = {"name":"张三","age":23};
//定义模板
var str = template('tpl',info);
// 将解析好的模板字符串(str),写入到网页的div中
document.getElementById('d').innerHTML = str;
</script>
</body>
</html>