用Ajax 循环遍历实现菜谱功能
程序员文章站
2022-05-21 09:43:55
...
Ajax 实现菜谱（api获取数据，循环"遍历创建节点）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜谱</title>
<style>
.all {
margin-top: 30px;
}*
.xh {
float: left;
margin-right: 20px;
color: red;
font-style: italic;
font-size: 30px;
}
#menu {
width: 500px;
}
h2{color: gold;}
.intro{color:darkslategray}
</style>
<script src="js/jquery-1.11.2.js"></script>
<script>
$(function () {
//给按钮注册事件
$("#btn").click(function () {
//获取要搜索的内容
var txt = $("#txt").val();
$("#menu").text("正在查询....");
//发送跨域的请求，jsonp
$.ajax({
type:"get",
url:"http://apis.juhe.cn/cook/query?key=1773826cafcf77389297b2dc874c5de8&rn=7&pn=0&dtype=jsonp&menu="+txt,//这个api可以自己去聚合网自行申请
//rn参数用于确定获取多少个菜
dataType:"jsonp",
success:function (data){
$("#menu").html("");//清空
if (data.resultcode != 200) {
$("#menu").text("亲，没查到");
return;
}
//获取数据，进行处理
var menus = data.result.data;
for(var i=0; i<menus.length; i++)
{
var menu = menus[i];//获取一个菜
//拼要生成的html标签
var all = $('<p class="all"></p>');
$("#menu").append(all);
//标题
var h2 = $('<h2>'+ menu.title +'</h2>');
all.append(h2);
//简介
var intro = $('<p class="intro">'+ menu.imtro +'</p>');
all.append(intro);
//生成图片albums
for (var j = 0; j<menu.albums.length; j++) {
var album = menu.albums[j];
var img = $('<img src="'+ album +'" />');
all.append(img);
}
//主料
var zl = $('<p class="zl">主料：'+ menu.ingredients +'</p>');
all.append(zl);
//辅料
var fl = $('<p class="fl">辅料：'+ menu.burden +'</p>');
all.append(fl);
//步骤
var steps = $('<p class="steps"></p>');
all.append(steps);
//遍历步骤
for(var k =0; k<menu.steps.length; k++) {
var step = menu.steps[k];
//序号
var xh = $('<em class="xh">'+ (k + 1) +'.</em>');
steps.append(xh);
//步骤内容
var c = $('<p class="c"></p>');
steps.append(c);
//
var p1 = $('<p>'+ step.step +'</p>');
c.append(p1);
var p2 = $('<p><img src="'+ step.img +'" /></p>');
c.append(p2);
}
all.append("<hr />");
}
},
/*
<p id="menu">
<p class="all">
<h2>秘制红烧肉</h2>
<p class="intro">简介简介</p>
<img src="">
<p class="zl">主料：哈哈</p>
<p class="fl">辅料：哈哈</p>
<p class="steps">
<em class="xh">1.</em>
<p class="c">
<p>第一步你猜是啥</p>
<p>图片哈</p>
</p>
</p>
</p>
<hr />
<p class="all">
<h2>秘制红烧肉</h2>
<p class="intro">简介简介</p>
<img src="">
<p class="zl">主料：哈哈</p>
<p class="fl">辅料：哈哈</p>
<p class="steps">
<em class="xh">1.</em>
<p class="c">
<p>第一步你猜是啥</p>
<p>图片哈</p>
</p>
</p>
</p>
</p>
* */
error: function () {
$("#menu").text("亲，出错了");
}
});
});
})
</script>
</head>
<body>
<input type="text" name="txt" id="txt"> <input type="button" value="搜索" id="btn">
<p id="menu">
</p>
</body>
</html>
请求的json文件数据格式,手动创建节点要进行比较：
//请求数据样式:
{
"resultcode": "200",
"reason": "Success",
"result": {
"data": [
{
"id": "2",
"title": "辣椒炒肉",
"tags": "家常菜;10分钟内;炒;孕妇;青少年;老人;白领;晚餐;香辣;营养;增强抵抗力;全菜系;1-2人;待客菜;炒锅",
"imtro": "辣椒炒肉，是湘菜里的一道经典家常菜，每家每户都会做的一道菜，而且每家都有自己的做法和绝招，呵呵。记得有次再朋友家里吃过这道菜，非常简单的做法，几乎没用啥特别的调料，味道却出奇的好，赶紧偷学了，回来做做，果然可以。电视里说烹饪协会定了湘菜的标准，辣椒炒肉辣椒和肉的比例要3:5，不知道这个规矩对不对，如果中餐都像西餐一样，都进行量化了，那么，是好事还是坏事呢，嘿嘿。那天看到番茄果说到辣椒炒肉，令我记忆起这道菜，于是花了8块钱买了半斤五花肉，还有1块钱的辣椒，一道不算贵又好吃的辣椒炒肉就出炉了。",
"ingredients": "五花肉,250g;尖椒,200g;青蒜,1个",
"burden": "生抽,适量;盐,适量;鸡精,适量",
"albums": [
"http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/t\/0\/2_124913.jpg"
],
"steps": [
{
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/2_034cf1bf3ae43bb6.jpg",
"step": "1.五花肉半斤洗净。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/2_6965df21425ff1f0.jpg",
"step": "2.将五花肉切片，用生抽将肉腌制一会儿。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/2_a7d5594b31fe3d5b.jpg",
"step": "3.准备好辣椒并洗净。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/2_28605064fce1d738.jpg",
"step": "4.将尖椒和青蒜切段。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/2_d68ee0e759797db0.jpg",
"step": "5.起油锅，下五花肉煸香并出出油。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/2_cfba88bbeae96778.jpg",
"step": "6.待五花肉八成熟时盛起待用。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/2_44ee8282fef4263c.jpg",
"step": "7.将辣椒，青蒜入锅煸炒。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/2_c4f00390cb4dc668.jpg",
"step": "8.等到辣椒炒至表皮有点快糊的时候，下肉一起炒匀。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/2_463887fd74a5a4ff.jpg",
"step": "9.待猪肉熟透后，加入盐、鸡精调味，就可以出锅了。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/2_2f99cbde26a81694.jpg",
"step": "10.好吃的辣椒炒肉，大家尝尝。"
}
]
}, {
"id": "3",
"title": "农家小炒肉",
"tags": "家常菜;辣;10分钟内;炒;下酒菜;下饭菜;全菜系;1-2人;炒锅",
"imtro": "对于冠有“农家”两个字的菜，在我认为，关键就是突出原汁原味的乡土气息，所以，重点不在刀工与形状，而在于主配料的齐全。农家小炒肉，说白了其实就是精华版的尖椒炒肉，但姜、蒜、辣椒不能省，正是由于多种配料的加入，才令爆香的味道十分惹人。",
"ingredients": "五花肉,500g",
"burden": "红椒,适量;尖椒,适量;青蒜,适量;蒜,适量;姜,适量;生抽,1大勺;剁椒,1大勺;鸡精,1\/2勺;油,适量",
"albums": [
"http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/t\/0\/3_139793.jpg"
],
"steps": [
{
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/3_304e397cc6ed0701.jpg",
"step": "1.五花肉洗净、切片，青红椒切块，青葱切段，蒜切片，姜切末；"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/3_293e9f6cf13a5b1d.jpg",
"step": "2.锅烧热，倒入少许油，油热后，放入姜蒜末爆香；"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/3_4e73297059d4fd8a.jpg",
"step": "3.倒入切片的五花肉；"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/3_73eb35cf5443b5c3.jpg",
"step": "4.翻炒至五花肉变色，加入青蒜；"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/3_7aa242fe22fc5e0f.jpg",
"step": "5.翻炒均匀，加入青红椒；"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/3_9a31789ebc25e549.jpg",
"step": "6.继续炒匀，加入剁椒；"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/3_42883e18a11e21a5.jpg",
"step": "7.加入生抽；"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/3_4cfb76967d70fd2d.jpg",
"step": "8.加入少许鸡精，翻炒均匀即可。"
}
]
}, {
"id": "8",
"title": "肉馅豆腐夹",
"tags": "家常菜;美容;通乳;增肥;痰湿质;骨质疏松;半小时-1小时;午餐;晚餐;冬季;止咳;下饭菜;补钙;咳嗽;3-4人;健脾;化痰;祛风散寒;祛寒;催乳;止咳化痰;下奶;健脾胃;锅子;其他味;其他工艺;助睡眠;小儿咳嗽;脾虚",
"imtro": "肉馅豆腐夹用猪肉、鸡蛋清、土豆等多种主料辅料做菜，真可谓荤素兼备，肉、菜、果俱全的集锦菜。猪肉、鸡蛋清含有丰富的动物性优质蛋白质和动物脂肪 菜品口感：多味道、多颜色、多营养。 豆腐：豆腐的蛋白质含量丰富，而且豆腐蛋白属完全蛋白，不仅含有人体必需的八种氨基酸，而且比例也接近人体需要，营养价值较高；有降低血脂，保护血管细胞，预防心血管疾病的作用。此外，豆腐对病后调养、减肥、细腻肌肤亦很有好处。 猪肉(瘦)：猪肉含有丰富的优质蛋白质和必需的脂肪酸，并提供血红素（有机铁）和促进铁吸收的半胱氨酸，能改善缺铁性贫血；具有补肾养血，滋阴润燥的功效；猪精肉相对其它部位的猪肉，其含有丰富优质蛋白，脂肪、胆固醇较少，一般人群均可适量食用。",
"ingredients": "豆腐,400g;猪肉,100g;土豆,1个",
"burden": "葱,10g;姜,5g;料酒,15ml;老抽,5ml;生抽,10ml;味精,2g;胡椒粉,1g;香油,10ml;色拉油,10ml;盐,2g;淀粉,5g;白糖,5g",
"albums": [
"http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/t\/0\/8_834748.jpg"
],
"steps": [
{
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/8_4a34d47052e21d10.jpg",
"step": "1.豆腐一块，用盐水浸泡10分钟。为了使豆腐容易成型。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/8_e561ad84f5779eaa.jpg",
"step": "2.猪肉洗净，切成小块。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/8_8fc67a8fef81f934.jpg",
"step": "3.葱、姜洗净。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/8_85fbe832118b4325.jpg",
"step": "4.把猪肉剁成碎末，葱、姜切碎。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/8_059d84fd0b98ca2c.jpg",
"step": "5.把豆腐切成每组两片，不要断开。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/8_be6cca7dcb62b31f.jpg",
"step": "6.肉馅中放入葱、姜末、料酒、老抽、生抽、盐、味精、胡椒粉、香油拌匀。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/8_fc1dce0c26d16101.jpg",
"step": "7.每两片豆腐中间放上一层肉馅，涂抹均匀。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/8_cc99f01f4e100577.jpg",
"step": "8.土豆去皮洗净，切成8毫米的薄片。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/8_2bc90b68ed56ea6a.jpg",
"step": "9.先把土豆片放入盘子里，再把豆腐肉夹均匀的放到土豆上面。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/8_9215786e9d89ce94.jpg",
"step": "10.锅里放足量的水，大火烧开，把豆腐肉夹放入锅中。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/8_ca496962e916a55b.jpg",
"step": "11.盖上锅盖，用大火蒸10分钟即可。关火取出来稍晾。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/8_faa352411801ac50.jpg",
"step": "12.锅里放少量油，把蒸豆腐的原汁倒入锅中，再放入老抽、生抽、白糖烧开后，用淀粉勾芡即可，出锅前放入香油调味即可。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/8_8d335279b5c6703a.jpg",
"step": "13.把烧好的酱汁浇到豆腐上即可，就可以吃了。"
}
]
}, {
"id": "9",
"title": "东坡肉",
"tags": "浙菜;家常菜;私房菜;炖;黄酒;花雕酒;春季;贴秋膘;香糯",
"imtro": "东坡肉属于浙菜系，成品薄皮嫩肉，色泽红亮，味醇汁浓，酥烂而形不碎，香糯而不腻口。东坡肉选料很讲究，要选择皮猪肉为主要原料，猪肉要选择肥瘦相间的，先焯水定型后再切方块烹制，特点是使用绍兴黄酒为主要炖煮材料，小火长时间慢炖，味道才地道。 这道菜据说是苏东坡发明的，苏东坡的《炖肉歌》道：“黄州好猪肉，价贱如粪土。富者不肯吃，贫者不解煮。慢着火、少着水，柴火罨焰烟不起，待它自熟莫催它，火候足时它自美。”",
"ingredients": "带皮五花肉,1000g;花雕酒,500g;小白菜,300g",
"burden": "冰糖,80g;盐,2小勺;大葱,80g;生姜,50g;老抽,1大勺;香油,1小勺;干淀粉,2小勺",
"albums": [
"http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/t\/0\/9_653116.jpg"
],
"steps": [
{
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/9_98cc25de49b69358.jpg",
"step": "1.将猪肉刮净皮上的余留猪毛，洗净。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/9_9a6158abab026eda.jpg",
"step": "2.放入冷水锅中。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/9_f8565538074c53ed.jpg",
"step": "3.大火烧开，煮至血末浮起，再煮5 分钟，捞出。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/9_5b3236f249cb95f7.jpg",
"step": "4.切成4厘米左右的小方块。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/9_e24279119bf68b84.jpg",
"step": "5.大葱切长段，生姜切大片。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/9_ae6defb77bd038b6.jpg",
"step": "6.砂锅内先铺一个竹垫，放入葱段和姜片。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/9_09a9e5249bbbb2be.jpg",
"step": "7.把切好的肉块皮朝下放入砂锅内。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/9_7b831d50a573c36c.jpg",
"step": "8.放入盐。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/9_f9026ccb426a60f3.jpg",
"step": "9.再放入老抽。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/9_91595f5efe9b0c4e.jpg",
"step": "10.然后倒入花雕酒，再放入200克清水。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/9_f3cafd0a409fd0ae.jpg",
"step": "11.把砂锅放到炉子上大火烧开，撇去浮沫后加盖转小火炖1小时。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/9_7766f21ff81d9c59.jpg",
"step": "12.放入冰糖，再炖30分钟。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/9_b7d243d96796cd9e.jpg",
"step": "13.把猪肉块翻过来，皮朝上再炖20分钟。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/9_911190784c03b756.jpg",
"step": "14.把顿好的肉皮朝上放入大碗中，入蒸锅大火蒸10-15分钟。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/9_1262010cc0f56c06.jpg",
"step": "15.把洗净的小白菜放入开水锅内焯烫致变色，捞出。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/9_400409be3975cbfb.jpg",
"step": "16.挤干小白菜的水分，用少许的盐和香油拌匀放入小砂锅内。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/9_07cbfce7e1035e55.jpg",
"step": "17.把肉汤放入炒锅内，加适量水淀粉勾成芡汁。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/9_f3728cd5c4451484.jpg",
"step": "18.猪肉皮朝上整齐地码放在小砂锅中，把芡汁浇在猪肉块上即可。"
}
]
}, {
"id": "14",
"title": "红烧肉",
"tags": "家常菜;老年人;咸;半小时-1小时;青少年;白领;红烧;1-2人;炒锅",
"imtro": "加了鹌鹑蛋，祝大家岁岁平“鹌”。",
"ingredients": "五花肉,250g;萝卜,100g;鹌鹑蛋,20个",
"burden": "油,适量;盐,适量",
"albums": [
"http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/t\/0\/14_359794.jpg"
],
"steps": [
{
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/14_706ca81e0bbecefe.jpg",
"step": "1.带皮五花肉 ，鹌鹑蛋，白萝卜备用。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/14_dc89a7e8f2823202.jpg",
"step": "2.配料备用。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/14_ae5efcd7698c7a51.jpg",
"step": "3.鹌鹑蛋煮熟后去皮，备用。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/14_6246ae9cde95a443.jpg",
"step": "4.白萝卜洗净，切大块。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/14_fa36e18ba88ba812.jpg",
"step": "5.五花肉，洗净切大块。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/14_fb6017cd9ea66698.jpg",
"step": "6.焯水后备用。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/14_79b1cc9fb722b4dd.jpg",
"step": "7.油锅烧热，下入肉块。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/14_0a45336653b0eb33.jpg",
"step": "8.煎到微黄。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/14_cb483431930bb8cd.jpg",
"step": "9.加入白糖。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/14_93eababb3d6f328a.jpg",
"step": "10.炒到金黄色。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/14_b1672001decab1dc.jpg",
"step": "11.加入料酒和老抽，炒均匀。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/14_03ce88cb45776456.jpg",
"step": "12.放入干红椒，生姜， 八角， 香叶，花椒，炒出香味后，后加入适量的水。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/14_5e067f35b2297a47.jpg",
"step": "13.煮十几分钟后，加入萝卜和鹌鹑蛋。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/14_7f8a56f9b8498703.jpg",
"step": "14.再煮上十几分钟，肉和萝卜软烂，大火收汁加入适量的盐即可。"
}
]
}, {
"id": "15",
"title": "泡椒肉末烤茄子",
"tags": "家常菜;10分钟内;浪漫;全菜系;1-2人;泡椒味;锅子",
"imtro": "这是我的创意菜，外面餐馆是没有滴哟。。。把自己的创意菜摆在家庭聚会的餐桌上，看到大家津津有味的吃着，听着大家的夸赞心里那叫一个美。什么累，都忘了。 这菜先把茄子放在煎锅中加入孜然和盐烤香进味，再把炒熟的泡椒肉末浇在茄子上面。是不是很简单呀，，可是味道却很赞，泡椒和肉的香味融进茄子里面带着孜然的味道，想想都留口水。。。",
"ingredients": "长茄子,300g;肉末,200g;泡椒,50g",
"burden": "葱,适量;姜,适量;盐,3g;孜然粒,3g;料酒,适量;酱油,适量;鸡精,2g;食用油,适量",
"albums": [
"http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/t\/0\/15_129222.jpg"
],
"steps": [
{
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/15_5cfbe317b2e8a72b.jpg",
"step": "1.茄子从中间抛开，面上切上花刀。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/15_0faa4640e1671341.jpg",
"step": "2.煎锅烧热刷上少量的油，茄子的切面朝上加入盐和孜然粒，煎烤至底部变软。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/15_8ab1dc5916405e4a.jpg",
"step": "3.把茄子翻面继续煎烤。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/15_52451a7b5a95d8c3.jpg",
"step": "4.煎烤至到茄子表面金黄，这时茄子已经熟透，盛出放入盘中。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/15_5ecb554c620bdf30.jpg",
"step": "5.锅中放入油爆香葱姜。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/15_09a7dfaf12cea04b.jpg",
"step": "6.下入肉馅煸炒至变色。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/15_b357fcf54a6319a7.jpg",
"step": "7.加入泡椒继续煸炒。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/15_2061656dcbf0e17e.jpg",
"step": "8.放入酱油 料酒 糖 煸炒均匀后加入鸡精调味。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/15_8f10e3d72dc1a496.jpg",
"step": "9.把炒好的泡椒肉末浇在煎烤好是茄子上即可。"
}
]
}, {
"id": "16",
"title": "莲花酱肉丝",
"tags": "青少年;孕妇;白领;锅子;全菜系;10-20分钟;1-2人;待客菜;营养;增强抵抗力;老人;酱爆;咸;家常菜;晚餐;京菜",
"imtro": "京酱肉丝的改良版，还是那样的皮，还是那样的肉，还是常用的那些配菜，只不过，换了换花型，把菜包了进来，肉丝直接用筷子夹着吃了。做成莲花的造型，招待客人，会不会让人有眼前一亮的感觉？只是，天阴，拍出的照片不尽人意。",
"ingredients": "豆腐皮,200g;里脊肉,180g",
"burden": "甜酱,适量;葱丝,适量;胡萝卜,适量;黄瓜,适量;淀粉,适量;蛋清,适量;料酒,适量",
"albums": [
"http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/t\/0\/16_673867.jpg"
],
"steps": [
{
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/16_655d65f37108da1b.jpg",
"step": "1.里脊肉切成丝，加蛋清、料酒、淀粉上浆。（我放的蛋清多了点）"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/16_3be5c4768d16fc8a.jpg",
"step": "2.薄豆皮用沸水烫一下。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/16_7909b48f45d4f7e0.jpg",
"step": "3.黄瓜和胡萝卜切成细丝。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/16_6d4c2ed21ba92f80.jpg",
"step": "4.锅中放少量油，入甜酱炒香。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/16_f7195eeb02197d6b.jpg",
"step": "5.将肉丝入锅中炒熟。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/16_21a82218cf2e9ebc.jpg",
"step": "6.将豆皮上摆点胡萝卜丝、黄瓜丝。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/16_0c85d6428eb8a6a4.jpg",
"step": "7.卷紧卷起切斜刀段。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/16_5ff5e4723da0045c.jpg",
"step": "8.沿盘的外围摆上一圈。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/16_c2d70b81f0f8c763.jpg",
"step": "9.放入肉丝。"
}, {
"img": "http:\/\/juheimg.oss-cn-hangzhou.aliyuncs.com\/cookbook\/s\/1\/16_b4a2abbee6254277.jpg",
"step": "10.再放些葱丝点缀。"
}
]
}
],
"totalNum": "11375",
"pn": "0",
"rn": "7"
},
"error_code": 0
}
以上就是用Ajax 循环遍历实现菜谱功能的详细内容，更多请关注其它相关文章！
推荐阅读
-
小弟我的php代码和html代码在一个页面，用$.ajax给自身传值小弟我想实现修改的功能
-
jquery - 实现修改的功能，用ajax怎么实现，就是一个edit.php读出数据,update.php更新数据，怎么实现？
-
ajax的校验功能怎样用SSM整合框架实现
-
用Ajax 循环遍历实现菜谱功能
-
小弟我的php代码和html代码在一个页面，用$.ajax给自身传值小弟我想实现修改的功能
-
thinphp volist 遍历输出 到a的链接上用U函数 带参数 实现文章小分类的这个功能？
-
mysql - 怎么用jQuery、Ajax、php实现这样的无刷新编辑功能？
-
mysql - 怎么用jQuery、Ajax、php实现这样的无刷新编辑功能？
-
怎么用ajax如何实现大文件上传的功能
-
小弟我的php代码和html代码在一个页面，用$.ajax给自身传值小弟我想实现修改的功能