第116天： Ajax运用artTemplate实现菜谱-白红宇

Ajax运用artTemplate实现菜谱

一、获取接口数据

1、聚合数据API https://www.juhe.cn，在这上面找到菜谱大全数据接口文档

具体使用是这样的：

key后面的数据是固定的，rn和pn是参数，后面的数值可以自定义，dtype是jsonp，最后加上输入的值 txt

url:"http://apis.juhe.cn/cook/query?key=1993189fed228f8036959eb6e187b419&rn=3&pn=0&dtype=jsonp&menu="+txt 2、请求参数说明

3、json的返回实例，这只列出了一个数据

在解析数据时，要根据json格式进行解析，具体数据如下：

1 { 2     "resultcode": "200", 3     "reason": "Success", 4     "result": { 5         "data": [{ 6             "id": "45", 7             "title": "秘制红烧肉", 8             "tags": "家常菜;热菜;烧;煎;炖;红烧;炒锅", 9             "imtro": "做红烧肉的豆亲们很多，大家对红烧肉的热爱更不用我说，从名字上就能反映出来。一些高手们对红烧肉的认识更是令我佩服，单单就红烧肉的做法、菜谱都看得我是眼花缭乱，口水横流。单纯的红烧肉我平时还真没做过，再不抓紧时间做一回解解馋，不是对不起别人，而是太对不起我自己了！ 这道菜的菜名用了秘制二字来形容，当然是自己根据自己多年吃货的经验想象出来的，我不介意把自己的做法与大家共享，只为大家能同我一样，吃到不同口味的红烧肉。不同的人们根据自己的习惯都有不同的做法，味道也不尽相同。我的秘制的关键就是必须用玫瑰腐乳、冰糖和米醋这三种食材，腐乳和冰糖可以使烧出来的肉色泽红亮，米醋能解腻，令肥肉肥而不腻，此法烧制的红烧肉软糯中略带咸甜，的确回味无穷！",10             "ingredients": "五花肉,500g",11             "burden": "玫瑰腐乳,适量;盐,适量;八角,适量;草果,适量;香叶,适量;料酒,适量;米醋,适量;生姜,适量",12             "albums": ["http:\/\/img.juhe.cn\/cookbook\/t\/0\/45_854851.jpg"],13             "steps": [{14                 "img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/45_0824e37faf00b71e.jpg",15                 "step": "1.将五花肉煮至断生状态"16             },17             {18                 "img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/45_b6d7329b703f6e85.jpg",19                 "step": "2.切成大小一致的块"20             },21             {22                 "img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/45_6ee9e8dab0516333.jpg",23                 "step": "3.放在锅内煎"24             },25             {26                 "img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/45_b9afd6d4dd81f55c.jpg",27                 "step": "4.入生姜"28             },29             {30                 "img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/45_d0170fbe236421f9.jpg",31                 "step": "5.放八角草果各一个，香叶一片"32             },33             {34                 "img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/45_639b12210745fa41.jpg",35                 "step": "6.放冰糖"36             },37             {38                 "img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/45_c25e0cedd2012f45.jpg",39                 "step": "7.加料酒"40             },41             {42                 "img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/45_eb68327980f022dd.jpg",43                 "step": "8.加玫瑰腐乳和腐乳汁及适量盐"44             },45             {46                 "img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/45_ac17263a11507a41.jpg",47                 "step": "9.加米醋"48             },49             {50                 "img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/45_f5489af5d12b4930.jpg",51                 "step": "10.加水继续炖"52             },53             {54                 "img": "http:\/\/img.juhe.cn\/cookbook\/s\/1\/45_8e0cf83cb7306281.jpg",55                 "step": "11.直至肉变软糯汤汁收干即可"56             }]57         }]

二、案例完整源代码

1  2  3  4     
      5     菜谱 6     21 22     23     24        //模板引擎 64     88 89 90     91     92     
     
93 94