JSON模板引擎动态--atrTemplate例子:动态生成表格_json 模板动态多表头-优快云博客

本文链接：https://blog.youkuaiyun.com/yellowmushroom/article/details/80307790

本文介绍如何利用模板引擎简化Ajax返回数据的处理过程，通过一个实例演示如何实现动态表格数据加载，包括前端页面搭建、后端数据交互及模板引擎配置等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前提：我们在使用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' 模板框架。

下载地址：https://aui.github.io/art-template/zh-cn/docs/installation.html

3.导入模板框架后，在head部分准备模板。

注：要用script标签,必须给type属性，但是值可以随便写，只要不是 text/javascript 就可以。

必须要给这个script标签加 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.完成，我们可以看到点击“加载数据”按钮时，动态的生成了表格行列，并带出数据。