通过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. [CSP-S模拟测试]:数字(数学+高精度)

    题目描述 很简单,给出正整数$n$,求出$n!$在十进制表示下的从最末非零位开始的总共$k$位. 输入格式 第一行一个正整数$T$,表示有$T$组数据接下来$T$行,每行两个正整数$n$和$k$. 输 ...

  2. php面试专题---mysql数据库分库分表

    php面试专题---mysql数据库分库分表 一.总结 一句话总结: 通过数据切分技术将一个大的MySQLServer切分成多个小的MySQLServer,既攻克了写入性能瓶颈问题,同一时候也再一次提 ...

  3. php面试专题---Mysql索引原理及SQL优化

    php面试专题---Mysql索引原理及SQL优化 一.总结 一句话总结: 注意:只写精品 1.为表设置索引要付出代价 是什么? 存储空间:一是增加了数据库的存储空间 修改插入变动索引时间:二是在插入 ...

  4. scrapy--meta参数传递问题

    scrapy使用大坑---meta参数传递出现之重复问题 问题描述: 爬虫目标: 实现哔哩哔哩网站的视频信息爬取,只要的信息结构爬去顺序为**关键词的搜索结果,拿到第一页上某个视频的标题,url,和时 ...

  5. Git学习及使用

    一.认知git理论 1.git出现的背景 版本控制 版本控制是一种记录一个或若干文件内容变化,以便将来查阅特定版本修订情况的系统. 许多人习惯用复制整个项目目录的方式来保存不同的版本,或许还会改名加上 ...

  6. Netty精进01

    为什么要学习Netty? 目前基于Netty实现的一些优秀的开源框架:Dubbo.RocketMQ.Spark.Spring5.Flink.ElasticSearch.gRPC……这些还说明不了为什么 ...

  7. 聊聊redis的监控工具

    序 本文主要研究一下redis的监控工具 redis-stat redis-stat是一个比较有名的redis指标可视化的监控工具,采用ruby开发,基于redis的info命令来统计,不影响redi ...

  8. Java基础复习(1)

    1. Java 基本数据类型 参考博客: https://www.cnblogs.com/LiaHon/p/11043238.html Java语言提供了八种基本类型. 六种数字类型(四个整数型,两个 ...

  9. Java8默认方法

    Java8引入的接口默认方法实现一个新的概念.此功能是为了向后兼容性增加,使旧接口可用于利用JAVA8. lambda表达式的能力,例如,列表或集合接口不具备forEach方法声明.从而增加了这样的方 ...

  10. MySQL数据库忘记密码如何重新设置?

    前 言当我们忘记了MySQL数据库密码后,该如何重新进行设置? 操作步骤步骤1:cmd打开命名窗口 步骤2:关闭正在运行的MySQL服务(命令:net stop mysql)(如果:此时MySQL正在 ...