通过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逻辑代码