mianf网站,做家装的网站有哪些内容,百度seo搜索引擎优化厂家,廊坊百度优化作为现代应用#xff0c;ajax的大量使用#xff0c;使得前端工程师们日常的开发少不了拼装模板#xff0c;渲染模板 在刚有web的时候#xff0c;前端与后端的交互#xff0c;非常直白#xff0c;浏览器端发出URL#xff0c;后端返回一张拼好了的HTML串。浏览器对其进行渲…作为现代应用ajax的大量使用使得前端工程师们日常的开发少不了拼装模板渲染模板 在刚有web的时候前端与后端的交互非常直白浏览器端发出URL后端返回一张拼好了的HTML串。浏览器对其进行渲染。html中可能会混有一些php(或者php中混有一些html)。在服务端将数据与模板进行拼装生成要返回浏览器端的html串。 这与我们现在做一个普通网页没什么区别。只不过现在我们更常使用模板技术来解决前后端耦合的问题。 前端使用模板引擎在html中写一些标签与数据与逻辑基本无关。后端在渲染的时候解析这些标签生成HTML串如smarty。其实前端与后端的交互在服务端就已经有一次了。 下面是自己敲的案例,非常直观来渲染前端页面,可以复制来看看 可以参照GitHub上面来看https://github.com/BorisMoore/jquery-tmpl 1 !DOCTYPE html2 html langen3 head4 meta charsetUTF-85 title/title6 style typetext/css7 #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 typetext/javascript srcjs/jquery-1.9.1.min.js/script
22 script typetext/javascript srcjs/template.js/script
23 script idweather typetext/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 typetext/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 htmltemplate(weather,data);
56 $(#info).html(html);
57 }
58
59 })
60 })
61 })
62
63 /script
64 /head
65 body
66 div idcontainer
67 select idcity
68 option value101010100北京/option
69 option value101020100上海/option
70 option value101280101广州/option
71 option value101280601深圳/option
72 /select
73 input typebutton value查询 idquery
74 div idinfo/div
75 /div
76 /body
77 /html 转载于:https://www.cnblogs.com/creatP/p/6694736.html
