ajax小练习
Posted 北漂阿猫
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax小练习相关的知识，希望对你有一定的参考价值。
接口地址：http://apis.juhe.cn/cook/query.php
支持格式：json/xml
请求方式：get/post
请求示例：http://apis.juhe.cn/cook/query?key=&menu=%E8%A5%BF%E7%BA%A2%E6%9F%BF&rn=10&pn=3
JSON返回示例：
{
"resultcode": "200",
"reason": "Success",
"result": {
"data": [{
"id": "45",
"title": "秘制红烧肉",
"tags": "家常菜;热菜;烧;煎;炖;红烧;炒锅",
"imtro": "做红烧肉的豆亲们很多，大家对红烧肉的热爱更不用我说，从名字上就能反映出来。一些高手们对红烧肉的认识更是令我佩服，单单就红烧肉的做法、菜谱都看得我是眼花缭乱，口水横流。单纯的红烧肉我平时还真没做过，再不抓紧时间做一回解解馋，不是对不起别人，而是太对不起我自己了！ 这道菜的菜名用了秘制二字来形容，当然是自己根据自己多年吃货的经验想象出来的，我不介意把自己的做法与大家共享，只为大家能同我一样，吃到不同口味的红烧肉。不同的人们根据自己的习惯都有不同的做法，味道也不尽相同。我的秘制的关键就是必须用玫瑰腐乳、冰糖和米醋这三种食材，腐乳和冰糖可以使烧出来的肉色泽红亮，米醋能解腻，令肥肉肥而不腻，此法烧制的红烧肉软糯中略带咸甜，的确回味无穷！",
"ingredients": "五花肉,500g",
"burden": "玫瑰腐乳,适量;盐,适量;八角,适量;草果,适量;香叶,适量;料酒,适量;米醋,适量;生姜,适量",
"albums": ["http:\/\/img.juhe.cn\/cookbook\/t\/0\/45_854851.jpg"],
"steps": [{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/45_0824e37faf00b71e.jpg",
"step": "1.将五花肉煮至断生状态"
},
{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/45_b6d7329b703f6e85.jpg",
"step": "2.切成大小一致的块"
},
{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/45_6ee9e8dab0516333.jpg",
"step": "3.放在锅内煎"
},
{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/45_b9afd6d4dd81f55c.jpg",
"step": "4.入生姜"
},
{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/45_d0170fbe236421f9.jpg",
"step": "5.放八角草果各一个，香叶一片"
},
{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/45_639b12210745fa41.jpg",
"step": "6.放冰糖"
},
{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/45_c25e0cedd2012f45.jpg",
"step": "7.加料酒"
},
{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/45_eb68327980f022dd.jpg",
"step": "8.加玫瑰腐乳和腐乳汁及适量盐"
},
{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/45_ac17263a11507a41.jpg",
"step": "9.加米醋"
},
{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/45_f5489af5d12b4930.jpg",
"step": "10.加水继续炖"
},
{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/45_8e0cf83cb7306281.jpg",
"step": "11.直至肉变软糯汤汁收干即可"
}]
},
{
"id": "52",
"title": "经典红烧肉",
"tags": "家常菜;咸;半小时-1小时;孕妇;青少年;老人;白领;晚餐;红烧;营养;增强抵抗力;全菜系;1-2人;待客菜;锅子",
"imtro": "红烧肉是热菜菜谱之一，以五花肉为制作主料，红烧肉的做法各地也会稍有不同。南方习惯用酱油（老抽）调色，而北方则偏爱炒糖色儿，红烧肉也是我拿手菜之一，不管是逢年过节还是亲朋聚会都不会少了诱人的红烧肉。红烧肉的特点；浓油赤酱，肥而不腻，入口酥软即化。",
"ingredients": "五花肉,1000g",
"burden": "葱,适量;姜,适量;蒜,适量;八角,2粒;桂皮,1块;干辣椒,1个;酱油,适量;冰糖,适量;盐,适量;料酒,适量",
"albums": ["http:\/\/img.juhe.cn\/cookbook\/t\/1\/52_759155.jpg"],
"steps": [{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/52_b02a6aa276e3352f.jpg",
"step": "1.五花肉洗净切成大块。"
},
{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/52_0cfde36e8061dd9c.jpg",
"step": "2.冷水把肉下锅烧开，把肉焯水。"
},
{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/52_4bbe9a903c8b144e.jpg",
"step": "3.准备好 八角 桂皮 葱姜蒜 辣椒。"
},
{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/52_887688f6d7716106.jpg",
"step": "4.把锅烧热，下入焯水的五花肉，小火煸炒至五花肉出油。"
},
{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/52_72ddd29b5fba09c3.jpg",
"step": "5.下入葱姜蒜 八角 桂皮 辣椒继续煸炒至肉色微黄。盛出。"
},
{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/52_90765e3bf8a33c53.jpg",
"step": "6.锅中留底油放入冰糖小火熬至起沫成棕红色。"
},
{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/52_95ddaa107b65158b.jpg",
"step": "7.倒入煸炒的五花肉翻炒均匀，使每块肉均匀沾满糖色，"
},
{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/52_68a1aa355f2c62e9.jpg",
"step": "8.加入料酒、酱油"
},
{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/52_b4391bab5b4c70b7.jpg",
"step": "9.加入开水没过肉，盖上锅盖开火煮沸，调小火炖40分钟，"
},
{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/52_22e562a234ed1891.jpg",
"step": "10.烧至肉熟烂、把汤汁收浓即可。"
}]
},
{
"id": "92",
"title": "红烧肉",
"tags": "家常菜;快手菜",
"imtro": "红烧肉，各地各家的做法稍有不同味道即大不一样，中餐的精妙在于食材随意性而产生的变化，南方习惯用酱油(老抽)调色，而北方则偏爱炒糖色。 女人不要为了保持好身材，刻意与美味的肉类食品绝缘哦。其实，很多科学证明，适当的吃肉并不会增加额外的脂肪。 猪肉经过小火煸炒出油后，炖出来的红炒肉是肥而不腻，软烂入味，非常的好吃美味，也非常适合咱们的健康理念，即少油，又解馋，又解腻，下面，为你推荐这种红烧肉的经典做法，不用一滴油就可以做出美味健康的红烧肉。",
"ingredients": "猪后臀尖,1000g",
"burden": "葱段,适量;八角,2个;干辣椒,4个;香叶,4片;桂皮,1块;鲜姜,1块;干山楂片,4片;黄油,适量;老抽,适量;生抽,适量;白糖,适量;开水,适量",
"albums": ["http:\/\/img.juhe.cn\/cookbook\/t\/1\/92_512827.jpg"],
"steps": [{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/92_472370e29b980b31.jpg",
"step": "1.猪肉清洗干净切成方块，冷水下锅，水开后撇去上面的浮沫。"
},
{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/92_04f90c14513aa139.jpg",
"step": "2.焯好的肉块捞出，用温水清洗干净。"
},
{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/92_50af1fae3911794d.jpg",
"step": "3.准备好调料：干辣椒，桂皮，香叶，八角，（大蒜也可以不放）。"
},
{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/92_12f839ee0920c03b.jpg",
"step": "4.做锅开小火，不放油，把肉块放入反复煸炒，煸炒至肉块有点焦香，有油渗出，关火把肉块捞出。"
},
{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/92_bfdc35cde7da929b.jpg",
"step": "5.做锅，用肉块煸出的猪油烧热，放入八角，干辣椒，桂皮，香叶煸炒出香味。"
},
{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/92_e21dddc1ffcad36b.jpg",
"step": "6.放入肉块煸炒1-2分钟后捞出备用。"
},
{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/92_89ba401801a762fe.jpg",
"step": "7.用锅中剩下的余油放入2勺白糖（这个量可以根据自己的喜好添加，喜欢吃甜一点的就多放点糖），开小火煸炒白糖。"
},
{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/92_33f84ea85dcd11c9.jpg",
"step": "8.这是糖色变化的过程"
},
{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/92_bbf69240b5f7211d.jpg",
"step": "9.当糖起小泡，颜色变红就可以了。"
},
{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/92_114bbdd5ef3d1255.jpg",
"step": "10.这时快速烹上1勺热水，加入肉块煸炒至肉块颜色变红。"
},
{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/92_831b33673ac8c507.jpg",
"step": "11.煸炒至猪肉块上色后，加入适量生抽，老抽（不可多放，放多了颜色就发黑了），黄酒煸炒。"
},
{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/92_a377c03180cb6b26.jpg",
"step": "12.加入开水（多放点水，最好一次加足，肉炖熟了可以大火收汤，水少了，中途加水就影响肉质的口感了），再把姜块，葱段，山楂片放入。"
},
{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/92_127b81298ad6cf93.jpg",
"step": "13.盖上锅盖，大火烧开，小火炖煮1个小时。"
},
{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/92_59ebcf1a60e54619.jpg",
"step": "14.炖煮了一个小时了，汤汁也差不多剩一半了，这时加入6克盐（盐可以根据自己的口味添加，在还有汤的情况下，不要尝出咸味正好，等汤汁收浓就会咸了），小火继续炖煮。"
},
{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/92_f4cbb0c04220428e.jpg",
"step": "15.当品尝到肉质软烂，就可以大火收汁，一锅肥而不腻，肉质酥烂，诱人食欲的红烧肉就炖好了，赶快就着小酒，大快朵颐的享受吧"
},
{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/92_372112ff28389c98.jpg",
"step": "16.炎热的夏季，吃一顿少油，解腻，又美味的红烧肉大餐。"
},
{
"img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/92_1630281ff0350105.jpg",
"step": "17.再来一张，想吃吗，那就赶紧动手吧，呵呵。"
}]
}],
"totalNum": "306",
"pn": "1",
"rn": "3"
},
"error_code": 0
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> .all { margin-top: 30px; } .xh { float: left; margin-right: 20px; color: red; font-style: italic; font-size: 30px; } #menu { width: 500px; } </style> <script type="text/javascript" src="jquery-2.2.0.min.js"></script> <script type="text/javascript"> $(function(){ $("#btn").click(function(){ var menu=$("#menu"); menu.text("正在加载中……"); var txt=$("#txtSearch").val(); txt=encodeURIComponent(txt); $.ajax({ type:"get", url:"http://apis.juhe.cn/cook/query?key=8823b720ffa8a4d4c5933a644bfb4fd8&rn=3&pn=0&dtype=jsonp&menu="+txt, dataType:"jsonp", success:function(data){ //清空容器 menu.text(""); if (data.resultcode!=200) { menu.text("亲，没有搜索到你想要的内容！") return; }; for (var i = 0; i<data.result.data.length; i++) { //循环每一道菜 var mydata=data.result.data[i]; var all=$(‘<div class="all"></div>‘); menu.append(all); // 标题 var h2=$(‘<h2>‘+mydata.title+‘</h2>‘); all.append(h2); //简介简介 var intro=$(‘ <p class="intro">‘+mydata.imtro+‘</p>‘); all.append(intro); //图片哈 for(var j=0;j<mydata.albums.length;j++){ var albums=mydata.albums[j]; var img=$(‘<img src="‘+albums+‘">‘); all.append(img); } //主料： var ingredients=$(‘<p class="zl">‘+mydata.ingredients+‘</p>‘); all.append(ingredients); //辅料：哈哈 var burden=$(‘<p class="fl">‘+mydata.burden+‘</p>‘); all.append(burden); //步骤 var steps=$(‘<div class="steps"></div>‘); all.append(steps); //循环里面的每一个步骤 for(var k=0;k<mydata.steps.length;k++){ var step=mydata.steps[k]; //序列号 var xh=$(‘<em class="xh">‘+(k+1)+‘</em>‘); steps.append(xh); //步骤1 var c=$(‘<div class="c"></div>‘); steps.append(c); var p1=$(‘<p>‘+step.step+‘</p>‘); c.append(p1); var p2=$(‘<p>‘+‘<img src="‘+step.img+‘">‘+‘</p>‘); c.append(p2); } }; }, error:function(){ menu.text("错误") } }) }) }) </script> </head> <body> <input type="text" name="" id="txtSearch"> <input type="button" value="搜索" id="btn"> <div id="menu"> <!-- <div class="all"> <h2>秘制红烧肉</h2> <p class="intro">简介简介</p> <img src=""> <p class="zl">主料：哈哈</p> <p class="fl">辅料：哈哈</p> <div class="steps"> <em class="xh">1.</em> <div class="c"> <p>第一步你猜是啥</p> <p>图片哈</p> </div> </div> </div> --> </div> </body> </html>
以上是关于ajax小练习的主要内容，如果未能解决你的问题，请参考以下文章