模板引擎渲染页面

最新推荐文章于 2025-07-01 11:22:23 发布

原创最新推荐文章于 2025-07-01 11:22:23 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#模板引擎 #ajax

前端专栏收录该内容

19 篇文章

订阅专栏

①导入模板引擎

②定义模板

③挖坑

④起名字

⑤填坑

⑥使用

举例如下：

 <!-- 导入模板引擎 -->
  <script src="../assets/vendors/art-template/template-web.js"></script>
  <!-- 定义模板 -->
  <script type="text/html" id="cateTem">
    {{each}}
      <tr>
        <td class="text-center"><input type="checkbox"></td>
        <td>{{$value.name}}</td>
        <td>{{$value.slug}}</td>
        <td class="text-center">
          <a href="javascript:;" class="btn btn-info btn-xs">编辑</a>
          <a href="javascript:;" deleteid="{{$value.id}}" class="btn btn-danger btn-xs">删除</a>
        </td>
      </tr>
    {{/each}}
  </script>

使用的时候，是通过ajax成功取得的数据来渲染模板。

例

 $.ajax({
        url: 'http://www.baixiu_my.com/admin/API/01.getAllCategories.php',
        // type:,
        // data:,
        success: function (backData) {
          console.log(backData);
          var result = template('cateTem', backData);
          // console.log(result);
          $('tbody').html(result);
        }
      })