ajax之菜譜案例
阿新 • • 發佈:2018-12-21
思路:使用jQuery中的ajax方法,並使用jsonp,得到來自聚合資料返回的選單資料,然後動態生成標籤巢狀資料。
關鍵知識:jQuery中ajax(),jsonp
具體程式碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>菜譜</title> <style media="screen"> .box { width: 500px; margin: 40px auto; } .all { margin-top: 30px; } .xh { float: left; margin-right: 20px; color: red; font-style: italic; font-size: 30px; } #menu { width: 500px; } </style> </head> <body> <div class="box"> <input type="text" id="txt" placeholder="請輸入菜名" /> <input type="button" value="search" id="btn" /> <div id="menu"> </div> </div> </body> <script src="jquery-1.11.2.js"> </script> <script type="text/javascript"> $(function() { $("#btn").click(function() { var txt = $("#txt").val(); var menu = $("#menu"); menu.text("正在載入...") $.ajax({ type: 'get', url: 'http://apis.juhe.cn/cook/query?key=035ab7995ec39cc741917e094142333e&rn=5&pn=3&menu=' + txt, dataType: 'jsonp', async: true, success: function(data) { menu.text(''); if (data.result == null) { menu.text("抱歉,查詢無結果"); return; } var return_data = data.result.data; //動態建立菜譜 $.each(return_data, function(i, ele) { // ele指向每道菜的資料物件 var all = $('<div class="all"></div>'); menu.append(all); //名稱 var title = $('<h2>' + (i + 1) + '. 菜名:</h2>'); title.append(ele.title); all.append(title); //簡介 var intro = $('<p class="intro">簡介:</p>'); intro.append(ele.imtro); all.append(intro); //成品圖 $.each(ele.albums, function(j, pics) { var pic = $('<img src="' + pics + '">'); all.append(pic); }); //主料 var zl = $('<p class="zl">主料:</p>'); zl.append(ele.ingredients); all.append(zl); //輔料 var fl = $('<p class="fl">輔料:</p>'); fl.append(ele.burden); all.append(fl); //做菜步驟 var steps = $('<div class="steps">開始吧:</div>'); all.append(steps); //遍歷步驟並動態新增 $.each(ele.steps, function(k, step) { //step為每步的資料(包含文字和圖片) var step_text = $('<p></p>'); step_text.append(step.step); steps.append(step_text); var step_pic = $('<p><img src="' + step.img + '"></p>'); steps.append(step_pic); }); }); }, error: function() { alert("失敗"); } }); }); }); </script> </html>
方法2:鑑於上述程式碼中動態生成標籤並新增的程式碼過多,使用artTemplate模板簡化
具體程式碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>菜譜</title> <style media="screen"> .box { width: 500px; margin: 40px auto; } .all { margin-top: 30px; } .xh { float: left; margin-right: 20px; color: red; font-style: italic; font-size: 30px; } #menu { width: 500px; } </style> </head> <body> <div class="box"> <input type="text" id="txt" placeholder="請輸入菜名" /> <input type="button" value="search" id="btn" /> <div id="menu"> </div> </div> </body> <!-- 模板 --> <script type="text/html" id="tpl"> <% for(var i=0;i< data.length;i++) {%> <div class="all"> <h2>菜名:<%= data[i].title %></h2> <p class="intro">簡介:<%= data[i].imtro %></p> <% for(var j=0;j< data[i].albums.length;j++) {%> <img src=""<%= data[i].albums[j] %>""> <% } %> <p class="zl">主料:<%= data[i].ingredients %></p> <p class="fl">輔料:<%= data[i].burden %></p> <% for(var k=0;k< data[i].steps.length;k++) {%> <div class="steps"> <p><%= data[i].steps[k].step %></p> <p><img src="<%= data[i].steps[k].img %>"></p> </div> <% } %> </div> <% } %> </script> <script src="jquery-1.11.2.js"> </script> <script src="template-native-debug.js"> </script> <script type="text/javascript"> $(function() { $("#btn").click(function() { var txt = $("#txt").val(); var menu = $("#menu"); menu.text("正在載入...") $.ajax({ type: 'get', url: 'http://apis.juhe.cn/cook/query?key=035ab7995ec39cc741917e094142333e&rn=5&pn=3&menu=' + txt, dataType: 'jsonp', async: true, success: function(data) { //清空容器 menu.text(''); if (data.result == null) { menu.text("抱歉,查詢無結果"); return; } //呼叫模板 var temp = template('tpl', data.result); menu.html(temp); }, error: function() { alert("失敗"); } }); }); }); </script> </html>