Ajax運用artTemplate實作菜單
一、擷取接口資料
1、聚合資料API https://www.juhe.cn，在這上面找到菜單大全資料接口文檔
具體使用是這樣的：
key後面的資料是固定的，rn和pn是參數，後面的數值可以自定義，dtype是jsonp，最後加上輸入的值 txt
url:"http://apis.juhe.cn/cook/query?key=1993189fed228f8036959eb6e187b419&rn=3&pn=0&dtype=jsonp&menu="+txt
2、請求參數說明
3、json的傳回執行個體，這隻列出了一個資料
在解析資料時，要根據json格式進行解析，具體資料如下：
1 {
2 "resultcode": "200",
3 "reason": "Success",
4 "result": {
5 "data": [{
6 "id": "45",
7 "title": "秘制紅燒肉",
8 "tags": "家常菜;熱菜;燒;煎;炖;紅燒;炒鍋",
9 "imtro": "做紅燒肉的豆親們很多，大家對紅燒肉的熱愛更不用我說，從名字上就能反映出來。一些高手們對紅燒肉的認識更是令我佩服，單單就紅燒肉的做法、菜單都看得我是眼花缭亂，口水橫流。單純的紅燒肉我平時還真沒做過，再不抓緊時間做一回解解饞，不是對不起别人，而是太對不起我自己了！ 這道菜的菜名用了秘制二字來形容，當然是自己根據自己多年吃貨的經驗想象出來的，我不介意把自己的做法與大家共享，隻為大家能同我一樣，吃到不同口味的紅燒肉。不同的人們根據自己的習慣都有不同的做法，味道也不盡相同。我的秘制的關鍵就是必須用玫瑰腐乳、冰糖和米醋這三種食材，腐乳和冰糖可以使燒出來的肉色澤紅亮，米醋能解膩，令肥肉肥而不膩，此法燒制的紅燒肉軟糯中略帶鹹甜，的确回味無窮！",
10 "ingredients": "五花肉,500g",
11 "burden": "玫瑰腐乳,适量;鹽,适量;八角,适量;草果,适量;香葉,适量;料酒,适量;米醋,适量;生姜,适量",
12 "albums": ["http:\/\/img.juhe.cn\/cookbook\/t\/0\/45_854851.jpg"],
13 "steps": [{
14 "img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/45_0824e37faf00b71e.jpg",
15 "step": "1.将五花肉煮至斷生狀态"
16 },
17 {
18 "img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/45_b6d7329b703f6e85.jpg",
19 "step": "2.切成大小一緻的塊"
20 },
21 {
22 "img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/45_6ee9e8dab0516333.jpg",
23 "step": "3.放在鍋内煎"
24 },
25 {
26 "img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/45_b9afd6d4dd81f55c.jpg",
27 "step": "4.入生姜"
28 },
29 {
30 "img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/45_d0170fbe236421f9.jpg",
31 "step": "5.放八角草果各一個，香葉一片"
32 },
33 {
34 "img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/45_639b12210745fa41.jpg",
35 "step": "6.放冰糖"
36 },
37 {
38 "img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/45_c25e0cedd2012f45.jpg",
39 "step": "7.加料酒"
40 },
41 {
42 "img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/45_eb68327980f022dd.jpg",
43 "step": "8.加玫瑰腐乳和腐乳汁及适量鹽"
44 },
45 {
46 "img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/45_ac17263a11507a41.jpg",
47 "step": "9.加米醋"
48 },
49 {
50 "img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/45_f5489af5d12b4930.jpg",
51 "step": "10.加水繼續炖"
52 },
53 {
54 "img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/45_8e0cf83cb7306281.jpg",
55 "step": "11.直至肉變軟糯湯汁收幹即可"
56 }]
57 }] 二、案例完整源代碼
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>菜單</title>
6 <style>
7 .all {
8 margin-top: 30px;
9 }
10 .xh {
11 float: left;
12 margin-right: 20px;
13 color: red;
14 font-style: italic;
15 font-size: 30px;
16 }
17 #menu {
18 width: 500px;
19 }
20 </style>
21
22 <script src="./jquery-2.2.0.js"></script>
23 <script src="template-native-debug.js"></script>
24 <script>
25 //1、從伺服器擷取資料
26 //2、解析從伺服器擷取的資料
27 $(function(){
28 $("#btnSearch").click(function(){
29
30 var menu=$("#menu");
31 menu.text("正在加載...");//頁面加載慢時顯示
32 //擷取文本框的值
33 var txt=$("#txtSearch").val();
34 //對使用者輸入的内容進行URL編碼
35 txt=encodeURIComponent(txt);
36 //發送異步請求 jsonp
37 $.ajax({
38 type:"get",
39 url:"http://apis.juhe.cn/cook/query?key=1993189fed228f8036959eb6e187b419&rn=3&pn=0&dtype=jsonp&menu="+txt,
40 dataType:"jsonp",
41 success:function(data) {
42 //清空容器
43 menu.text("");
44
45 //解析資料
46
47 if (data.resultcode != 200) {
48 menu.text("親，沒查到你想要的");
49 return;
50 }
51 //解析資料 模闆引擎
52
53 var html = template("tpl", data.result);
54 menu.html(html);
55 },
56 error:function(){
57 menu.text("錯誤");
58 }
59 });
60 });
61 })
62
63 </script>
//模闆引擎
64 <script id="tpl" type="text/html">
65 <% for(var i=0;i< data.length;i++) { %>
66 <div class="all">
67 <h2><%= data[i].title %></h2>
68 <p class="intro"><%= data[i].imtro %></p>
69 <% for(var j=0;j< data[i].albums.length;j++) { %>
70 <img src="<%= data[i].albums[j] %>">
71 <% } %>
72 <p class="zl">主料：<%= data[i].ingredients %></p>
73 <p class="fl">輔料：<%= data[i].burden %></p>
74 <div class="steps">
75 <% for(var k=0;k< data[i].steps.length;k++) { %>
76 <em class="xh"><%= k+1 %>.</em>
77 <div class="c">
78 <p><% data[i].steps[k].step %></p>
79 <p><img src= "<%= data[i].steps[k].img %>"></p>
80 </div>
81 <% } %>
82 </div>
83 </div>
84 <hr>
85 <% } %>
86
87 </script>
88 </head>
89 <body>
90 <input type="text" id="txtSearch">
91 <input type="button" value="搜尋" id="btnSearch">
92 <div id="menu"></div>
93 </body>
94 </html> ![使用underscore的template自定義模闆[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)