JSON模板引擎动态--atrTemplate例子:动态生成表格

前提：我们在使用ajax的时候，有时候得到数据之后需要拼接成Html字符串输出，比较麻烦。我们使用js引擎可以省略拼接字符串的过程。

需求：页面新建一个表格与加载数据按钮，点击按钮，查询数据库，表格根据得到的数据信息动态的生成行和列显示数据。

步骤：

1.我们需要新建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代码需要用<% %>包起来。

      代码示例:

4.新增script标签，用来获取后端数据，注：获得数据的代码与创建模板的代码不能写在同一个标签中，最好写在html标签后面。代码示例:

5.后端php代码示例：

6.完成，我们可以看到点击“加载数据”按钮时，动态的生成了表格行列，并带出数据。