通過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="width: 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邏輯代碼