ajax第三天（模板引擎）

最新推荐文章于 2021-08-22 21:54:37 发布

qfCSDN

最新推荐文章于 2021-08-22 21:54:37 发布

阅读量183

点赞数

分类专栏： ajax基础文章标签： ajax

本文链接：https://blog.csdn.net/qfCSDN/article/details/110297642

版权

ajax基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

模板引擎

作用：动态渲染数据时代替拼接字符串的操作

1-引入

遍历data数组生成动态结构–以拼接字符串的方式来生成动态结构

结构代码不能复用
没有语法高亮
没有代码提示
代码没有报错
代码没有层次结构

2-创建模板结构

模板仅仅是一个结构上的参照，我们并不需要在进行默认的解析，意味在页面中不应该出现模板结构

所以我们的需求 :

1.能够描述我们想要的结构

2.能够在需要的时候自由的获取

3.不需要在页面中自动的渲染出来

所以我们可以将这个结构添加到script标签中

script 也是一个标签，可以通过标签获取里面的结构
script标签中还可以进行一些逻辑处理
script标签中的内容之所以会进行js解析，是因为它有默认的type属性，为type="text/ javascript "，意味着我们只要设置一个自定义的type值，不让浏览器进行js的处理,我们一般会将这个type设置为模板专用类型：text/template
同时为了能够方便的获取这个模板结构，我们会为模板结构script设置一个id号

<script type="text/template" id='userlistTemp'>

3-artTemplate 原生 js 模板语法

1.引入插件

<script src="template-web.js"></script>

2.添加模板结构

<script type="text/template" id='userTemp'>

3.添加输出表达式

目的就是为了数据的替换，意味着我们应该在模板结构中标记到底数据应该如何进行替换

对内容编码输出：<%=content%> ：原样输出： text()
不编码输出：<%=#content%>:解码输出，会解析内容

4.核心方法

template(模板id,数据对象)：返回动态生成的页面结构

5.注意：

逻辑代码，以后会被当成js解析,所以不要在<%%>之间包含任何的非js代码

案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
  <script src="./js/template-web.js"></script>
</head>
<body>
 <button>替换</button>
 <ul>
  <!-- <li>jack</li>
  <li>20</li> -->
 </ul>
  <script type="text/template" id='userTemp'>
 <!-- 下面代码的意思是：以后这个结构<%=name%>需要被 你传入的数据对象的name属性的值替换 -->
 <li><%=#name%></li>
 <li><%=age%></li>

 </script>
  <script>
  let obj = {
   name: 'rose123<hr>',
   age: 18
  }
  document.querySelector('button').onclick = function () {
   // 通过模板引擎的方式来实现元素的内容的替换
   // 调用模板引擎的方法实现动态结构的生成
   // 所传递的数据是对象(如果数据是数组，也建议你包装为对象)
   // let str = template(模板id, 数据对象)
   let str = template('userTemp', obj)
   document.querySelector('ul').innerHTML = str
  }
 </script>
</body>
</html>

4-artTemplate 简洁语法（重点掌握）

1.引入插件

<script src="./js/jquery.min.js"></script>
<script src="template-web.js"></script>：可以原生和简洁语法

2.逻辑表达式：

{{ 与 }} 符号包裹起来的语句则为模板的逻辑表达式

3.输出表达式：(编码可以防止数据中含有 HTML 字符串，避免引起 XSS 攻击)

对内容编码输出：{{content}}
不编码输出：{{#content}}

4.循环遍历表达式： 无论数组或者对象都可以用 each 进行遍历

arr.forEach(function(value,index){})

5.注意：

{{each data}} // 键和索引的名称只能是$value和$index
或者自定义键和索引，如
{{each data v i}}

案例

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>11-使用字符串拼接的方式生成动态网页</title>
  <link rel="stylesheet" href="./css/bootstrap.css">
  <script src="./js/jquery.min.js"></script>
  <script src="./js/template-web.js"></script>
  <style type="text/css">
    .hero-list img {
      width: 50px;
      height: 50px;
      display: block
    }

    .hero-list td {
      height: 50px;
      line-height: 50px;
    }
  </style>
</head>
<body>
  <header>
    <div class="page-header container">
      <h1>王者荣耀 <small>英雄管理器</small></h1>
    </div>
  </header>
  <div class="container hero-list">
    <table class="table table-hover">
      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>性别</th>
          <th>头像</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="tbody">
        <!-- 添加动态渲染内容区域 -->
      </tbody>
    </table>
  </div>

  <script type="text/template" id='userlistTemp'>
    {{each data value index}}
      {{if i%2 !== 0}}
        <tr style='background:#ccc'> 
      {{else}}
        <tr style='background:#ff0'> 
      {{/if}}
        <td>{{index + 1}}</td>
        <td>{{value.name}}</td>
        <td>{{value.gender=='男'?'男生':'女生'}}</td>
        <td><img src="http://127.0.0.1:3002/images/{{value.img}}"></td>
        <td>
            <a href="#">查看</a>
            <a href="javascript:;">修改</a>
            <a href="javascript:;">删除</a>
        </td>
      </tr>
    {{/each}}
  </script>
  <script type="text/javascript">
    $(function () {
      console.log('我认识你')
      // 9：“英雄”案例获取所有数据
      // - 请求路径：http://127.0.0.1:3002/getalldata
      // - 请求方法：get

      // 动态渲染：发送请求  分析数据>>log  创建模板  调用模板引擎  填充到指定位置
      $.ajax({
        url: 'http://127.0.0.1:3002/getalldata',
        dataType: 'json',
        success: function (res) {
          console.log(res) // res.data
          if (res.code == 200) {
            //  let str = template(模板id,数据对象)
            let str = template('userlistTemp', res)
            // console.log(str)
            $('#tbody').html(str)
          }
        }
      })

    })
  </script>
</body>
</html>

qfCSDN

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
ajax第三天（模板引擎）

Ajax 第三天模板引擎作用：动态渲染数据时代替拼接字符串的操作1-引入遍历data数组生成动态结构–以拼接字符串的方式来生成动态结构结构代码不能复用没有语法高亮没有代码提示代码没有报错代码没有层次结构2-创建模板结构模板仅仅是一个结构上的参照，我们并不需要在进行默认的解析，意味在页面中不应该出现模板结构所以我们的需求 :1.能够描述我们想要的结构2.能够在需要的时候自由的获取3.不需要在页面中自动的渲染出来所以我们可以将这个结构添加到sc
复制链接

扫一扫

专栏目录