通过ajax请求到的数据，使用传统的拼接字符串也可以做到，但是‘ “ ” ‘这种模式，单引号、双引号容易 扩错，新手入门推荐使用这种，初入前端，需要一个一个敲代码体会一下。
使用 template.js 使用效果更佳；
Demo效果图-下面上源码
源码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>火车票查询</title> 8 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 9 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> 10 <script src="js/template-web.js"></script> 11 <style> 12 .table>thead>tr>th{ 13 text-align: center; 14 } 15 </style> 16 </head> 17 18 <body> 19 20 <div class="container"> 21 <div class="col-md-12"> 22 <form class=""> 23 <div class="form-group "> 24 <label for="startCity">始发站</label> 25 <input type="text" class="form-control" placeholder="北京" id="startCity" value="嘉兴"> 26 </div> 27 <div class="form-group"> 28 <label for="endCity">终点站</label> 29 <input type="text" class="form-control" placeholder="上海" id="endCity" value="上海"> 30 </div> 31 <button type="button" class="btn btn-primary" id="Serach" style=" 100%;">查询</button> 32 </form> 33 </div> 34 <div class="col-md-12"> 35 <div class="panel panel-default"> 36 <!-- Default panel contents --> 37 <div class="panel-heading">火车列表</div> 38 <table id="table" class="table text-center table-hover"> 39 <thead> 40 <tr > 41 <th>序号</th> 42 <th>车次</th> 43 <th>类型</th> 44 <th>始发站</th> 45 <th>终点站</th> 46 <th>出发时间</th> 47 <th>到达时间</th> 48 <th>用时</th> 49 <th>预定</th> 50 </tr> 51 </thead> 52 <tbody> 53 </tbody> 54 </table> 55 </div> 56 </div> 57 58 </div> 59 </div> 60 <script> 61 $(function () { 62 $('#Serach').on('click', () => { 63 var start = $('#startCity').val(); 64 var end = $('#endCity').val(); 65 $.ajax({ 66 type: 'get', 67 url: 'http://api.jisuapi.com/train/station2s', 68 data: { 69 appkey: 'XXXXXXX', //密钥需要自己申请 70 start: start, 71 end: end 72 }, 73 dataType: "jsonp", 74 jsonp: "callback", 75 success: data => { 76 $('#table tbody').html(null); 77 console.log(data); 78 79 var htmlStr = template('templateId', data); 80 console.log(htmlStr); 81 82 $('#table tbody').append(htmlStr); 83 } 84 }) 85 }); 86 $('#table tbody').delegate('button', 'click', function () { 87 console.log('获取' + this.dataset.trainno + '列车'); 88 }); 89 }); 90 </script> 91 <script type="text/template" id="templateId"> 92 <%for (var i = 0;i < result.list.length; i++ ){ %> 93 <tr > 94 <td ><%=i%></td> 95 <td ><%=result.list[i].trainno%></td> 96 <td ><%=result.list[i].typename%></td> 97 <td ><%=result.list[i].station%></td> 98 <td ><%=result.list[i].endstation%></td> 99 <td ><%=result.list[i].departuretime%></td> 100 <td ><%=result.list[i].arrivaltime%></td> 101 <td ><%=result.list[i].costtime%></td> 102 <td ><button type="button" class="btn btn-primary" data-trainno="<%=result.list[i].trainno%>">预定</button></td> 103 </tr> 104 <%}%> 105 </script> 106 </body> 107 </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逻辑代码