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>

  

时间: 2024-10-09 17:12:13

ajax小练习的相关文章

封装ajax小工具:

1 ajax-lib/ajaxutils.js: 2 3 // 创建request对象 4 function createXMLHttpRequest() { 5 try { 6 return new XMLHttpRequest();//大多数浏览器 7 } catch (e) { 8 try { 9 return ActvieXObject("Msxml2.XMLHTTP");//IE6.0 10 } catch (e) { 11 try { 12 return ActvieXOb

AJAX小问题

临时做个小项目,初学AJAX,遇到个小问题.网上搜到了.现在MARK一下. $.ajax({             type: "post",            url: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",            dataType:"json",            data: { User: username.value, PassWord: userpass.value },     

自己封装的一个Ajax小框架

在经历了Jsp实训的惨痛教训后,特意花了点时间学习Ajax,学完后自我感觉良好,于是写了如下一个小框架: 1 /** 2 * frameAjax 3 * 4 * 参数: 5 * paramsObj: Json 6 * required params: 7 * type:请求参数类型(String) 8 * url:请求地址(String) 9 * data:请求参数(Json),data可为空值. 10 * success:请求回调(Function) 11 * async:表示请求是否异步处理

传统AJAX小例

index.jsp: 1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.

封装一个自己的 Ajax小框架

框架代码如下: // 使用封装方法的人只关心提供http的请求方法,url地址,数据,成功和失败的回调方法 // 类的构造定义,主要职责就是新建出 XMLHttpRequest 对象 var MyXMLHttpRequest = function () { var xmlhttprequest; if (window.XMLHttpRequest) { xmlhttprequest = new XMLHttpRequest(); if (xmlhttprequest.overrideMimeTy

ajax小demo---JSONP 跨域原理及简单应用

一.jsonp Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据. 因为同源策略,(它是由Netscape提出的一个著名的安全策略,现在所有支持JavaScript 的浏览器都会使用这个策略.)我们不能从不同的域(网站)访问数据,而jsonp就是用来实现这种不能跨域请求数据. 二.jsonp原理: 在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,但img.iframe.scri

ajax小demo-----ajax中json的使用

使用简单例子,表单的的输入,将表单输入以JSON的形式传入,并后台返回JSON格式,使用js函数处理,进行显示,进一步熟悉了ajax的用法,以及JSON的的使用.例子如下: html部分: <form action="test1.php" method="get" onsubmit="return check();">  <label for="username">用户名 </label>&

AJAX小扩展

ajax请求的时候,会碰到这种情况,例如需要在每个ajax请求都带上相同的验证参数,是否有方法能够自动的将这些参数在ajax请求的时候自动带上? 我们都知道jQuery的ajaxSetup函数可以在ajax发起请求前,修改ajax请求的默认设置选项,之后执行的ajax的请求,如果对应的选项参数没有设置,将使用更改后的默认设置.设置的选项会存放于jQuery.ajaxSettings中. $.ajaxSetup({ data: { token: "XXXX" //在每次ajax请求带上t

JavaScript实现拖拽预览,AJAX小文件上传

本地上传,提前预览(图片.视频) 1.html中div标签预览显示.button标签触发上传事件. <div id="drop_area" style="border:3px dashed silver;width:200px; height:200px">将图片拖拽到此</div> <button onclick="xhr2()">ajax上传</button> 2.禁止浏览器打开文件行为 doc