当前位置:Gxlcms > JavaScript > 用Ajax循环遍历实现菜谱功能

用Ajax循环遍历实现菜谱功能

时间:2021-07-01 10:21:17 帮助过:11人阅读

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 循环遍历实现菜谱功能的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行