Ajax -模板引擎方法 -循环、分支、原生语法、实例

最新推荐文章于 2023-01-19 15:30:00 发布
最新推荐文章于 2023-01-19 15:30:00 发布
阅读量245 收藏
点赞数
分类专栏： 前端 文章标签： ajax html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Henry_ID/article/details/120135572
版权

模板引擎 - 循环

<!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>
    <script src="./libs/template-web.js"></script>
  </head>
  <body>
    <ul></ul>
    <!-- 添加模板 -->
    <!-- 在模板中可以使用你所传入的数据对象的属性，它会根据属性找到对应的值来使用 -->
    <!-- $index,当前数据的索引
         $value:当前数据 -->
    <script type="text/template" id="heroTemp">
      {{each data}}
        <li>
          <span>{{$index+1}}</span>---
          <span>{{$value.cname}}</span>---
          <span>{{$value.skin_name}}</span>
        </li>
      {{/each}}
    </script>
    <script>
      let list = {
        data: [
          {
            id: 14,
            cname: '孙膑',
            skin_name: '逆流之时|未来旅行|天使之翼|妖精王'
          },
          {
            id: 15,
            cname: '扁鹊',
            skin_name: '善恶怪医|救世之瞳|化身博士|炼金王'
          },
          { id: 16, cname: '白起', skin_name: '最终兵器|白色死神|狰|星夜王子' },
          {
            id: 17,
            cname: '芈月',
            skin_name: '永恒之月|红桃皇后|大秦宣太后|重明'
          }
        ]
      }

      let html = template('heroTemp', list)
      console.log(html)
      document.querySelector('ul').innerHTML = html
    </script>
  </body>
</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>
    <script src="./libs/template-web.js"></script>
  </head>
  <body>
    <ul></ul>
    <!-- 添加模板 -->
    <!-- 在模板中可以使用你所传入的数据对象的属性，它会根据属性找到对应的值来使用 -->
    <!-- $index,当前数据的索引
         $value:当前数据 -->
    <script type="text/template" id="heroTemp">
      {{each data v i}}
        <li>
          <span>{{i+1}}</span>---
          <span>{{v.cname}}</span>---
          <span>{{v.skin_name}}</span>
        </li>
      {{/each}}
    </script>
    <script>
      let list = {
        data: [
          {
            id: 14,
            cname: '孙膑',
            skin_name: '逆流之时|未来旅行|天使之翼|妖精王'
          },
          {
            id: 15,
            cname: '扁鹊',
            skin_name: '善恶怪医|救世之瞳|化身博士|炼金王'
          },
          { id: 16, cname: '白起', skin_name: '最终兵器|白色死神|狰|星夜王子' },
          {
            id: 17,
            cname: '芈月',
            skin_name: '永恒之月|红桃皇后|大秦宣太后|重明'
          }
        ]
      }

      let html = template('heroTemp', list)
      console.log(html)
      document.querySelector('ul').innerHTML = html
    </script>
  </body>
</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 type="text/css"></style>
    <!-- 1.引入模板引擎的资源文件，只要引入了这个文件就会在全局挂载一个template函数 -->
    <script src="./libs/template-web.js"></script>
  </head>
  <body>
    <ul></ul>

    <!-- 创建模板结构：我们只是需要参照这个结构，但是并不需要浏览器以html语法来解析这个结构 -->
    <!-- script标签有一个默认的type='text/javascript',它的作用就是告诉浏览器里面的内容是js代码，所以要以js语法进行解析 -->
    <!-- 在浏览器，有一个专门的type='text/template'，就是用来描述模板结构的 -->
    <!-- 在模板中，可以使用你传入的数据对象的属性，模板内部会根据属性名称找到对应的值来使用 -->

    <!-- 你得指定在某个结构中你想显示的数据对象的属性名称 -->
    <!-- obj.obi.name -->
    <script type="text/template" id="textTemp">
      <li>{{name}}</li>
      <li>{{gender==1?'男':'女'}}</li>
      {{if gender == 1}}
      <li>男</li>
      {{else if gender == 0}}
      <li>女</li>
      {{else}}
      <li>未知</li>
      {{/if}}
      <li>{{age}}</li>
    </script>

    <script type="text/template" id="listTemp">
      {{each list}}
        <span>{{$value.name}}</span> ---
        {{if ($value.gender === 1)}}
        <span>男</span> ----
        {{else if $value.gender ===0}}
        <span>女</span> ----
        {{else}}
        <span>未知</span> ----
        {{/if}}
        <span>{{$value.age}}</span> <br>
      {{/each}}
    </script>
    <script>
      let obj = {
        list: [
          {
            name: 'jack',
            gender: 1,
            age: 20
          },
          {
            name: 'rose',
            gender: 0,
            age: 19
          },
          {
            name: 'tom',
            gender: 2,
            age: 18
          }
        ]
      }

      // 2.调用模板引擎的方法，传入模板id和数据，返回生成动态结构
      // template(模板id,数据对象)
      // let html = template('textTemp', obj)
      let html = template('listTemp', obj)
      console.log(html)

      document.querySelector('ul').innerHTML = html
    </script>
  </body>
</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>
    <script src="./libs/template-web.js"></script>
    <style>
      div {
        width: 400px;
        height: 400px;
        border: solid;
      }
    </style>
  </head>
  <body>
    <div></div>
    <script type="text/template" id="comTemp">
      <p>{{content}}</p>
      <p>{{@content}}</p>
      <p>{{#content}}</p>
    </script>

    <script>
      let obj = {
        content: '<h2>我是h2</h2><hr>'
      }

      let html = template('comTemp', obj)
      console.log(html)

      document.querySelector('div').innerHTML = html
    </script>
  </body>
</html>

模板的原生语法

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我们的68</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
    <style>
      .panel {
        width: 900px;
        margin: 10px auto;
      }

      .table img {
        width: 40px;
        height: 40px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="panel panel-primary">
        <!-- Default panel contents -->
        <div class="panel-heading">英雄列表管理</div>
        <div class="panel-body">
          <!-- 存放的搜索区域 -->
          <div class="row">
            <div class="col-lg-6">
              <div class="input-group">
                <input
                  type="text"
                  id="hname"
                  class="form-control"
                  placeholder="输入英雄信息..."
                  autocomplete="true"
                />
                <span class="input-group-btn">
                  <button class="btn btn-default" id="btn_search" type="button">
                    搜索
                  </button>
                </span>
              </div>
              <!-- /input-group -->
            </div>
            <!-- /.col-lg-6 -->

            <div class="col-lg-3 col-lg-offset-3">
              <!-- 添加英雄的按钮 -->
              <!-- data-toggle="modal"：说明控制显示隐藏的元素是toggle效果 -->
              <!-- data-target：控制的模态框是#myModal -->
              <!-- 属性的方式只能简单的弹出模态框，不能进行其它的业务处理 -->
              <button type="button" class="btn btn-success openDialog">
                添加英雄
              </button>
            </div>
          </div>
        </div>

        <!-- Table -->
        <table class="table">
          <thead>
            <tr>
              <th>编号</th>
              <th>英雄名称</th>
              <th>英雄性别</th>
              <th>头像</th>
              <th>操作区</th>
            </tr>
          </thead>
          <!-- 表格主体 -->
          <tbody id="tbody">
            <tr>
              <td>1</td>
              <td>a</td>
              <td>b</td>
              <td>
                <img src="" alt="" />
              </td>
              <td>
                <button type="button" class="btn btn-danger">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <script src="./libs/jquery/jquery.min.js"></script>
    <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
    <script src="./libs/template-web.js"></script>
    <!-- 添加英雄列表的模板结构 -->
    <script type="text/template" id="heroListTemp">
      <% for(let i=0; i< data.length;i++){ %>
        <tr>
            <td><%= i+1 %></td>
            <td><%= data[i].name %></td>
            <% if(data[i].gender==='男'){ %>
            <td>男</td>
            <% } else { %>
            <td>女</td>
            <%}%>
            <td>
              <img src="<%= data[i].img %>" alt="" />
            </td>
            <td>
              <button type="button" class="btn btn-danger">删除</button>
            </td>
          </tr>
      <% } %>
    </script>

    <script>
      // 查阅接口文档 》 发起ajax请求  >> 分析数据 >> 创建模板  》》 调用模板引擎生成动态结构 >> 填充到指定的位置
      $(function() {
        // 页面加载，发起ajax请求，获取所有英雄数据，使用模板引擎的方式进行动态渲染
        $.ajax({
          url: 'http://127.0.0.1:3001/getHeroList',
          success: function(res) {
            console.log(res)

            // 调用模板引擎生成动态结构
            let html = template('heroListTemp', res)
            // 填充到指定的位置
            $('#tbody').html(html)
          },
          dataType: 'json'
        })
      })
    </script>
  </body>
</html>

使用模板引擎渲染数据

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我们的68</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
    <style>
      .panel {
        width: 900px;
        margin: 10px auto;
      }

      .table img {
        width: 40px;
        height: 40px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="panel panel-primary">
        <!-- Default panel contents -->
        <div class="panel-heading">英雄列表管理</div>
        <div class="panel-body">
          <!-- 存放的搜索区域 -->
          <div class="row">
            <div class="col-lg-6">
              <div class="input-group">
                <input
                  type="text"
                  id="hname"
                  class="form-control"
                  placeholder="输入英雄信息..."
                  autocomplete="true"
                />
                <span class="input-group-btn">
                  <button class="btn btn-default" id="btn_search" type="button">
                    搜索
                  </button>
                </span>
              </div>
              <!-- /input-group -->
            </div>
            <!-- /.col-lg-6 -->

            <div class="col-lg-3 col-lg-offset-3">
              <!-- 添加英雄的按钮 -->
              <!-- data-toggle="modal"：说明控制显示隐藏的元素是toggle效果 -->
              <!-- data-target：控制的模态框是#myModal -->
              <!-- 属性的方式只能简单的弹出模态框，不能进行其它的业务处理 -->
              <button type="button" class="btn btn-success openDialog">
                添加英雄
              </button>
            </div>
          </div>
        </div>

        <!-- Table -->
        <table class="table">
          <thead>
            <tr>
              <th>编号</th>
              <th>英雄名称</th>
              <th>英雄性别</th>
              <th>头像</th>
              <th>操作区</th>
            </tr>
          </thead>
          <!-- 表格主体 -->
          <tbody id="tbody"></tbody>
        </table>
      </div>
    </div>

    <script src="./libs/jquery/jquery.min.js"></script>
    <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
    <script src="./libs/template-web.js"></script>
    <!-- 添加英雄列表的模板结构 -->
    <script type="text/template" id="heroListTemp">
      {{each data}}
        <tr>
          <td>{{$index + 1}}</td>
          <td>{{$value.name}}</td>
          <td>{{$value.gender}}</td>
          <td>
            <img src="{{$value.img}}" alt="" />
          </td>
          <td>
            <button type="button" class="btn btn-danger">删除</button>
          </td>
        </tr>
      {{/each}}
    </script>

    <script>
      // 查阅接口文档 》 发起ajax请求  >> 分析数据 >> 创建模板  》》 调用模板引擎生成动态结构 >> 填充到指定的位置
      $(function() {
        // 页面加载，发起ajax请求，获取所有英雄数据，使用模板引擎的方式进行动态渲染
        $.ajax({
          url: 'http://127.0.0.1:3001/getHeroList',
          success: function(res) {
            // 调用模板引擎生成动态结构
            let html = template('heroListTemp', res)
            // 填充到指定的位置
            $('#tbody').html(html)
          },
          dataType: 'json'
        })
      })
    </script>
  </body>
</html>
Henry_ww
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
art-template模板引擎循环嵌套
u012746918的博客
02-20 990
①首先引入 <script src="js/art-template" type="text/javascript" charset="utf-8"></script> ②确定要插入的位置  <div id="my"></div> ③新建一个 script标签   注意标签的type   t...
template模板引擎基础总结
seiEight的博客
07-04 452
基础数据渲染 引入 <!--原生的模板引擎文件--> <script src="lib/jquery/jquery.min.js"></script> <script src="lib/artTemplate/template-native.js"></script> 编写模板 <script id="template" type...
script标签的type为text/template模板的使用
shadow_zed的博客
05-13 1734
在js里面，经常需要使用js往页面中插入html内容。 比如这样： var number = 123; $('#d').append('<div class="t">'+number+'</div>'); 1 2 如果html很短还好说，但是遇到描述里面的这么大段，直接用字符串存储会很困难，因为不光要处理单引号，还需要很多「+」号把字符串一个个连接起来，十分的不方便。 给<script>设置type="text/template"，标签里面的内容不会被执...
前端模板引擎（art-template）循环使用方法
王野
08-28 7020
1.首先下载模板引擎art-template npm i art-template 2.引入模板 <script src="./node_modules/art-template/lib/template-web.js"></script> 注意：要注意引入顺序 3.定义模板 定义一个 type="text/html"的 script标签 ，使用 each循环结构 并且...
js 拼接是一件很麻烦的事，今天就教大家用模板引擎arttemplate来做循环嵌套
qq5833547的博客
01-05 3136
这是数据结构 { "code": 0, "msg": "成功", "data": { "pageNum": 1, "pageSize": 10, "size": 10, "orderBy": null, "startRow": 1, "endRow": 10, "total": 66, "pages": 7, "
JavaScript案例-原生ajax
最新发布
02-16
"JavaScript案例-原生ajax"这个主题聚焦于如何不依赖任何库或框架，仅用JavaScript原生API实现Ajax通信。 Ajax的核心在于XMLHttpRequest对象，它允许我们在不刷新整个页面的情况下发送HTTP请求并接收响应。以下是...
AJAX-request-JSON
04-28
在实际开发中，为了兼容性更好和更简洁的代码，开发者通常会使用jQuery的`$.ajax()`或`$.getJSON()`方法，或者是原生的fetch API。fetch API使用Promise语法，提供了更现代的异步处理方式： ```javascript fetch('...
ajax-prep：Hackbright作业12
02-12
10. **jQuery和库的使用**：虽然原生的Ajax实现需要较多的代码，但使用jQuery或其他库（如axios、fetch-ponyfill等）可以简化这一过程。 在“ajax-prep-master”这个文件夹中，可能包含了完成此作业所需的所有文件...
jQuery Ajax 实例详解 ($.ajax、$.post、$.get)
10-23
jQuery AJAX 是一个强大的异步数据通信工具，它封装了原生的 JavaScript AJAX 功能，使得在 JavaScript 中进行数据交互变得更加简单。在 jQuery 中，我们有几种不同的方法来实现 AJAX 请求，包括 $.ajax(), $.post()...
ajax调用简单实例
10-23
在本实例中，我们将深入探讨如何使用Ajax调用来获取远程数据，并将其填充到页面的指定区域。 首先，我们创建一个名为`createXMLHttp`的函数，这个函数的主要目的是创建一个XMLHttpRequest对象，这是Ajax调用的基础...
Ajax天气预报案例（使用模板引擎渲染）.zip
03-23
jquery中Ajax的使用，跨域使用接口查询各地天气预报，详细流程注释，简单易懂，以及模板引擎templ-web的简单运营，免去拼接字符串的繁琐-（需要修改接口appkey后才能使用）
Thymeleaf模板引擎常用属性之 th:each迭代循环
热门推荐
liubin5620的博客
05-27 7万+
thymeleaf模板引擎常用属性之 th:each迭代循环。
【Ajax】模板引擎
早睡早起长头发的博客
01-19 1593
姓名：{{name}}年龄：{{ age }}性别：{{ gender}}住址：{{address }}
【Ajax学习】模板引擎
qq_53582888的博客
11-16 174
1 渲染Ul结构时遇到的问题上述代码是通过字符串拼接的形式，来渲染UI结构。如果UI结构比较复杂，则拼接字符串的时候需要格外注意引号之前的嵌套。且一旦需求发生变化，修改起来也非常麻烦.2 什么是模板引擎模板引擎，顾名思义，它可以根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面。3 模板引擎的好处减少了字符串的拼接操作使代码结构更清晰使代码更易于阅读与维护。
Js script type="text/template"的使用
Bambi12的博客
10-08 7314
&lt;input type="button" id="clicbtn" value="点击显示" /&gt; &lt;div id='wldiv'&gt;&lt;/div&gt; &lt;script type="text/template" id="hide-div"&gt; &lt;span&gt;分离html和JS测
AJAX——模板引擎
asdf1234dfty的博客
07-19 306
模板引擎的学习使用
ajax正确返回数据，却进入了error分支
weixin_34099526的博客
04-14 136
.net 开发： $.ajax({ type: "POST", //post没有数据量限制 url: "ashx/PostHandle.ashx", data: { "datatype": "1", "event_name": event_name, "placename": placename, "starttime
Ajax
qq_38105960的博客
08-26 148
全称：Asynchronous JavaScript and XML（异步的js和XML） 用途：通过JS语言向服务器请求数据。 什么是ajax?---->js向服务器请求数据，实现异步请求，局部刷新。 原生js中ajax使用步骤 第一步：创建对象 var xhr = new XMLHttpRequest(); 为了兼容低版本的IE浏览器，需要实例化 var xhr = new Act...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Henry_ww

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值