作為現代應用，ajax的大量使用，使得前端工程師們日常的開發少不了拼裝模板，渲染模板
在剛有web的時候，前端與后端的交互，非常直白，瀏覽器端發出URL，后端返回一張拼好了的HTML串。瀏覽器對其進行渲染。html中可能會混有一些php(或者php中混有一些html)。在服務端將數據與模板進行拼裝，生成要返回瀏覽器端的html串。
這與我們現在做一個普通網頁沒什么區別。只不過現在，我們更常使用模板技術來解決前后端耦合的問題。
前端使用模板引擎，在html中寫一些標簽，與數據與邏輯基本無關。后端在渲染的時候，解析這些標簽，生成HTML串，如smarty。其實前端與后端的交互在服務端就已經有一次了。
下面是自己敲的案例,非常直觀來渲染前端頁面,可以復制來看看
可以參照GitHub上面來看https://github.com/BorisMoore/jquery-tmpl
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 #container{ 8 width: 400px; 9 min-height: 300px; 10 background-color: lightgreen; 11 margin: auto; 12 padding: 10px; 13 text-align: center; 14 } 15 li{ 16 list-style: none; 17 text-align: left; 18 } 19 20 </style> 21 <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> 22 <script type="text/javascript" src="js/template.js"></script> 23 <script id="weather" type="text/html"> 24 {{if weather}} 25 {{each weather as value}} 26 <div> 27 <span>日期:{{value.date}}</span> 28 <ul> 29 <li>白天天氣:{{value.info.day[1]}}</li> 30 <li>白天溫度:{{value.info.day[2]}}</li> 31 <li>白天天氣:{{value.info.day[3]}}</li> 32 <li>白天天氣:{{value.info.day[4]}}</li> 33 </ul> 34 <ul> 35 <li>夜間天氣:{{value.info.night[1]}}</li> 36 <li>夜間溫度:{{value.info.night[2]}}</li> 37 <li>夜間天氣:{{value.info.night[3]}}</li> 38 <li>夜間天氣:{{value.info.night[4]}}</li> 39 </ul> 40 </div> 41 {{/each}} 42 {{/if}} 43 </script> 44 <script type="text/javascript"> 45 $(function(){ 46 $("#query").click(function(){ 47 var code=$("#city").val(); 48 $.ajax({ 49 url : 'http://cdn.weather.hao.360.cn/api_weather_info.php', 50 data:{app:'hao360',code:code}, 51 jsonp:'_jsonp', 52 jsonpCallback:'abc', 53 dataType:'jsonp', 54 success:function(data){ 55 var html=template('weather',data); 56 $("#info").html(html); 57 } 58 59 }) 60 }) 61 }) 62 63 </script> 64 </head> 65 <body> 66 <div id="container"> 67 <select id="city"> 68 <option value="101010100">北京</option> 69 <option value="101020100">上海</option> 70 <option value="101280101">廣州</option> 71 <option value="101280601">深圳</option> 72 </select> 73 <input type="button" value="查詢" id="query"> 74 <div id="info"></div> 75 </div> 76 </body> 77 </html>