1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>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="js/jquery-2.2.0.js"></script> 23 <script> 24 //1 从服务器获取数据 25 //2 解析从服务器获取的数据 26 27 28 // http://apis.juhe.cn/cook/query?key=3e1dcd706f3f21875c6d7c5035351d75&rn=3&pn=0&dtype=jsonp&callback=handle&menu=%E8%A5%BF%E7%BA%A2%E6%9F%BF 29 30 //给搜索按钮注册事件 31 $(function () { 32 $("#btnSearch").click(function () { 33 // 34 var menu = $("#menu"); 35 menu.text("正在加载..."); 36 37 //获取文本框的值 38 var txt = $("#txtSearch").val(); 39 //对用户输入的内容进行url编码 40 , //发送异步请求 jsonp 41 $.ajax({ 42 type:"get", 43 url:"http://apis.juhe.cn/cook/query?key=3e1dcd706f3f21875c6d7c5035351d75&rn=3&pn=0&dtype=jsonp&menu=" + txt, 44 dataType:"jsonp", 45 success: function (data) { 46 //清空容器 47 menu.text(""); 48 //解析数据 49 50 if (data.resultcode != 200) { 51 menu.text("亲，没查到你要找的"); 52 return; 53 } 54 55 // 56 for (var i = 0; i < data.result.data.length; i++) { 57 //循环到的每一道菜 58 var mydata = data.result.data[i]; 59 var all = $('<div class="all"></div>'); 60 menu.append(all); 61 //标题 62 var h2 = $('<h2>'+ mydata.title +'</h2>'); 63 all.append(h2); 64 //简介 65 var p = $('<p class="intro">'+ mydata.imtro+'</p>'); 66 all.append(p); 67 //图片 68 for(var j=0;j<mydata.albums.length;j++) { 69 //图片 70 var album = mydata.albums[j]; 71 var img = $('<img src="'+ album +'">'); 72 all.append(img); 73 } 74 75 //主料 76 var zl = $('<p class="zl">主料：'+ mydata.ingredients +'</p>'); 77 all.append(zl); 78 //辅料 79 var fl = $('<p class="fl">辅料：'+ mydata.burden +'</p>'); 80 all.append(fl); 81 //步骤 82 var steps = $('<div class="steps"></div>'); 83 all.append(steps); 84 // 85 for(var k=0; k < mydata.steps.length; k++) { 86 var step = mydata.steps[k]; 87 //序号 88 var xh = $('<em class="xh">'+ (k+1) +'.</em>'); 89 steps.append(xh); 90 91 var c = $('<div class="c"></div>'); 92 steps.append(c); 93 //步骤 94 var p1 = $('<p>'+ step.step +'</p>'); 95 c.append(p1); 96 //步骤的图片 97 var p2 = $('<p><img src="'+ step.img +'"></p>'); 98 c.append(p2); 99 } 100 101 menu.append("<hr>"); 102 103 } 104 105 106 107 }, 108 error: function () { 109 menu.text("错误"); 110 } 111 }); 112 }); 113 }) 114 115 </script> 116 </head> 117 <body> 118 <input type="text" id="txtSearch"> <input type="button" value="搜索" id="btnSearch"> 119 120 <div id="menu"> 121 122 </div> 123 </body> 124 </html>