通过ajax请求到的数据，使用传统的拼接字符串也可以做到，但是‘ “ ” ‘这种模式，单引号、双引号容易 扩错，新手入门推荐使用这种，初入前端，需要一个一个敲代码体会一下。

使用 template.js 使用效果更佳；

Demo效果图-下面上源码

源码

 <!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>火车票查询</title>

     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">

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

     <style>

         .table>thead>tr>th{

             text-align: center;

         }

     </style>

 </head>

 <body>

     <div class="container">

         <div class="col-md-12">

             <form class="">

                 <div class="form-group ">

                     <label for="startCity">始发站</label>

                     <input type="text" class="form-control" placeholder="北京" id="startCity" value="嘉兴">

                 </div>

                 <div class="form-group">

                     <label for="endCity">终点站</label>

                     <input type="text" class="form-control" placeholder="上海" id="endCity" value="上海">

                 </div>

                 <button type="button" class="btn btn-primary" id="Serach" style="width: 100%;">查询</button>

             </form>

         </div>

         <div class="col-md-12">

             <div class="panel panel-default">

                 <!-- Default panel contents -->

                 <div class="panel-heading">火车列表</div>

                 <table id="table" class="table text-center table-hover">

                     <thead>

                         <tr >

                             <th>序号</th>

                             <th>车次</th>

                             <th>类型</th>

                             <th>始发站</th>

                             <th>终点站</th>

                             <th>出发时间</th>

                             <th>到达时间</th>

                             <th>用时</th>

                             <th>预定</th>

                         </tr>

                     </thead>

                     <tbody>

                     </tbody>

                 </table>

             </div>

         </div>

     </div>

     </div>

     <script>

         $(function () {

             $('#Serach').on('click', () => {

                 var start = $('#startCity').val();

                 var end = $('#endCity').val();

                 $.ajax({

                     type: 'get',

                     url: 'http://api.jisuapi.com/train/station2s',

                     data: {

                         appkey: 'XXXXXXX', //密钥需要自己申请

                         start: start,

                         end: end

                     },

                     dataType: "jsonp",

                     jsonp: "callback",

                     success: data => {

                         $('#table tbody').html(null);

                         console.log(data);

                         var htmlStr = template('templateId', data);

                         console.log(htmlStr);

                         $('#table tbody').append(htmlStr);

                     }

                 })

             });

             $('#table tbody').delegate('button', 'click', function () {

                 console.log('获取' + this.dataset.trainno + '列车');

             });

         });

     </script>

     <script type="text/template" id="templateId">

         <%for (var i = 0;i < result.list.length; i++ ){ %>

         <tr >

             <td ><%=i%></td>

             <td ><%=result.list[i].trainno%></td>

             <td ><%=result.list[i].typename%></td>

             <td ><%=result.list[i].station%></td>

             <td ><%=result.list[i].endstation%></td>

             <td ><%=result.list[i].departuretime%></td>

             <td ><%=result.list[i].arrivaltime%></td>

             <td ><%=result.list[i].costtime%></td>

             <td ><button type="button" class="btn btn-primary" data-trainno="<%=result.list[i].trainno%>">预定</button></td>

         </tr>

        <%}%>

     </script>

 </body>

 </html>

使用说明

        1、引入模版文件 template-web.js

        2、创建模版 <script type="text/template" id="templateId"></script>

        3、将数据跟模版进行绑定，调用 template-web.js 下面的template方法，模版的id，需要解析的数据。

        4、假设我将数据跟模版绑定后，模版文件 template-web.js 就会去解析模版里面的内容。

        5、要准备模版的里面的内容，模版里面的内容写到页面里面的标签有关系。

        6、我需要模版里面去解析数据，我需要在模版里面去解析数据。

        7、在模版里面解析数据，模版提供两种语法。

            1、一种是原生的语法。

            2、新语法。

            模版里面支持两种类型的标签<% %> 是用写逻辑的，里面都是js逻辑代码

前端-使用template-web.js【模版引擎】渲染数据的更多相关文章

  1. 利用tempalte.js模版引擎渲染页面，作对应的数据处理

    需要启个服务 需引入jquery.js和template.js <!DOCTYPE html> <html lang="en"> <head> ...

  2. JS模版引擎[20行代码实现模版引擎读后感]

    曾经阅读过<只有20行JAVASCRIPT代码, 手把手教你写一个页面模版引擎>这篇文章, 对其中实现模版的想法实在膜拜, 于是有了这篇读后感, 谈谈自己对模版引擎的理解, 以及用自己的语 ...

  3. 简单的 js 模版引擎

    简单的 js 模版引擎 var tplEngine = function(tpl, data) { var reg = /<%([^%>]+)?%>/g, regOut = /(^( ...

  4. js模版引擎handlebars.js实用教程——为什么选择Handlebars.js

    返回目录 据小菜了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是: ...

  5. js模版引擎handlebars.js实用教程

    js模版引擎handlebars.js实用教程 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的 ...

  6. 各种JS模板引擎对比数据(高性能JavaScript模板引擎)

    最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...

  7. js模版引擎开发实战以及对eval函数的改进

    简介 前段时间,想着自己写一个简单的模版引擎,便于自己平时开发demo时使用,同时也算是之前学习的知识的一种总结吧! 首先我们先了解一下模版引擎的工作原理吧! 1. 模版引擎其实就是将指定标签的内容根 ...

  8. handlebars.js模版引擎随记

    前台的模版引擎有许多种,相比较而言 我个人更觉得handlebars更为轻便 首先github上下载自新版本的handelbars.js http://handlebarsjs.com 下载下来之后呢 ...

  9. js模版引擎handlebars.js实用教程——each-基本循环使用方法

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  10. js模版引擎handlebars.js实用教程——each-循环中使用this

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

随机推荐

  1. js 和jquery

    1. js 全称 javascript 是 web客户端 运行的 解释性语言.. 2. jquery 只不过是 js 封装 简化了 ajax 和 dhtml 的 一款js 框架而已. 简单来说 Jqu ...

  2. 使用CFStringTransform将汉字转换为拼音

    之前做通讯录相关的一些App时,有一个比较常用的算法是将汉字转换成拼音.当时采用的做法是:将各个拼音段的首个汉字(按Unicode排序)做成两个数组,一个数组存拼音,另一个数组存拼音对应首个汉字的Un ...

  3. Centos6.5在线配置安装Java环境与Tomcat环境

        书写此文一来记录环境,以便后期查看使用,Linux环境下配置centos与Java开发环境 本文环境:虚拟机系统centos6.5   链接工具:xshell脚本链接工具 一.安装Java开发 ...

  4. iOS逆向一个APP指令集

    一.脱壳获取.app文件 1.查询壳有没加密 otool -l  mac-o文件 | grep crypt 2.Clutch -i Clutch -d  num 3.脱壳后的位置 /private/v ...

  5. Linux（RHEL7）下安装vsftp服务

    1.安装vsftp(没有配置yum源的先配置yum源) yum install -y vsftpd 2.启动ftp服务 systemctl start vsftpd.service 3.打开防火墙 f ...

  6. Linux学习篇（四）-Linux 文件管理命令详解

    rootfs:根文件系统,Root FileSystem 的简称. Linux 文件命名规则 长度不超过255个字符. 不能使用/当文件名. 严格区分大小写. Linux 目录简介 / 根目录 /bo ...

  7. 用notepad++ 打造轻量级Java编译器

    http://blog.163.com/jackie_howe/blog/static/19949134720125591752396/ 用notepad++ 打造轻量级Java编译器 2012-06 ...

  8. 百度地图api设置点的自定义图标不显示

    百度地图api设置点的设置代码为: var myIcon = new BMap.Icon(): 所以首先要找到这行代码,并在括号中加上图片信息: var myIcon = new BMap.Icon( ...

  9. 第1 章 mysql数据库之简单的DDL和DML sql语句

    一.SQL 介绍 1.什么是sql? SQL,英文全称(Structured Query Language),中文是结构化查询语言,它是一种对关系数据库中数据进行定义和操作的语言方法,是大多数关系数据 ...

  10. linux crontab 执行任务(7秒执行)

    创建的contab 文件中,每一行都代表一项任务,每行的每个字段代表一项设置.前五个字段是时间,第六个字段是要执行的命令 minute   hour   day   month   week   co ...