作为现代应用，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>