利用聚合网制作菜谱 

  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>

 

posted @ 2018-03-01 09:08  前端极客  阅读(323)  评论(0)  编辑  收藏  举报