思路分析

文件地址：链接：https://pan.baidu.com/s/1QxHoYfsFXERLmqT1tMbo7Q 密码：y89a

样式效果：

分析：

①实现这个效果，我们一般需要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>

显示数据库数据以及模板引擎的使用

思路分析

代码实现

总结

artTemplate模板引擎

猜你喜欢