Rumah >hujung hadapan web >tutorial js >用Ajax 循环遍历实现菜谱功能
用Ajax 循环遍历实现菜谱功能
- 一个新手asal
- 2017-09-26 09:21:341652semak imbas
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
}Atas ialah kandungan terperinci 用Ajax 循环遍历实现菜谱功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：vue.js样式绑定问题Artikel seterusnya：利用Ajax脚本化HTTP
Artikel berkaitan
Lihat lagi- Analisis mendalam bagi komponen kumpulan senarai Bootstrap
- Penjelasan terperinci tentang fungsi JavaScript kari
- Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
- Angularjs menyepadukan UI WeChat (weui)
- Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional