第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=&pn=0&dtype=jsonp&menu="+txt
2、请求参数说明
3、json的返回实例，这只列出了一个数据
在解析数据时，要根据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.直至肉变软糯汤汁收干即可"
}]
}]
二、案例完整源代码
<!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;
}
</style> <script src="./jquery-2.2.0.js"></script>
<script src="template-native-debug.js"></script>
<script>
//1、从服务器获取数据
//2、解析从服务器获取的数据
$(function(){
$("#btnSearch").click(function(){ var menu=$("#menu");
menu.text("正在加载...");//页面加载慢时显示
//获取文本框的值
var txt=$("#txtSearch").val();
//对用户输入的内容进行URL编码
txt=encodeURIComponent(txt);
//发送异步请求 jsonp
$.ajax({
type:"get",
url:"http://apis.juhe.cn/cook/query?key=1993189fed228f8036959eb6e187b419&rn=3&pn=0&dtype=jsonp&menu="+txt,
dataType:"jsonp",
success:function(data) {
//清空容器
menu.text(""); //解析数据 if (data.resultcode != 200) {
menu.text("亲，没查到你想要的");
return;
}
//解析数据 模板引擎 var html = template("tpl", data.result);
menu.html(html);
},
error:function(){
menu.text("错误");
}
});
});
}) </script> //模板引擎
<script id="tpl" type="text/html">
<% for(var i=0;i< data.length;i++) { %>
<div class="all">
<h2><%= data[i].title %></h2>
<p class="intro"><%= data[i].imtro %></p>
<% for(var j=0;j< data[i].albums.length;j++) { %>
<img src="<%= data[i].albums[j] %>">
<% } %>
<p class="zl">主料：<%= data[i].ingredients %></p>
<p class="fl">辅料：<%= data[i].burden %></p>
<div class="steps">
<% for(var k=0;k< data[i].steps.length;k++) { %>
<em class="xh"><%= k+1 %>.</em>
<div class="c">
<p><% data[i].steps[k].step %></p>
<p><img src= "<%= data[i].steps[k].img %>"></p>
</div>
<% } %>
</div>
</div>
<hr>
<% } %> </script>
</head>
<body>
<input type="text" id="txtSearch">
<input type="button" value="搜索" id="btnSearch">
<div id="menu"></div>
</body>
</html>
第116天： Ajax运用artTemplate实现菜谱的更多相关文章
- 第115天：Ajax 中artTemplate模板引擎（一）
一.不分离与分离的比较 1.前后端不分离,以freemarker模板引擎为例,看一下不分离的前后端请求的流程是什么样的? 从上图可以看出,前后端开发人员的工作耦合主要在(3)Template的使用.后 ...
- ajax配合art-template模板引擎的使用
最近才接触js的模板引擎听说相比以前使用的js foreach加载后台返回的json数据简便很多而且效率方面也很不错.今天自己玩了一下 后台使用的是.net mvc,数据库脚本就不提供了,返回的Jso ...
- 前端模板引擎artTemplate.js
. 关于artTemplate模板引擎的详细原理请移步高性能JavaScript模板引擎原理解析,本文只探讨如何使用.初学前端的人一般对于绑定数据都是使用原生js或者jquery来拼接字符串,此为ha ...
- javascript零散要点收集
1.this永远指向函数对象的所有者 2.ECMA-262 把对象(object)定义为“属性的无序集合,每个属性存放一个原始值.对象或函数”.严格来说,这意味着对象是无特定顺序的值的数组. 3.pr ...
- Vue 基础篇
Vue 基础篇 一.框架与库的区别 JQ库->DOM(DOM操作) + Ajax请求 art-template库->模板引擎 框架 -> 全方位.功能齐全 简易的DOM体验 + 发请 ...
- ajax请求数据填充表格———使用art-template模板提高效率
一.为什么要用art-template模板 在实习的一次项目中,因为需求中展示表格的字段有很多个,后端返回的也是json数据,这时候如果还是使用之前的字符串拼接,这样会开发得比较慢,而且容易出错,而且 ...
- JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- 【JavaScript】ArtTemplate个人的使用体验。
据说ArtTemplate是腾讯的,感觉这东西真不错,使用方便,用起来很简单,哈哈.腾讯也不完全只是坑爹啊. ArtTemplate 使用是,正常引入js,这个自然不用说.这东西啥时候使用呢?我觉得这 ...
随机推荐
- 20155212——man指令的使用及mypwd的实现
man指令的使用及mypwd的实现 man指令的使用 一.man -k的k参数以及代表的意思 代号 代表內容 1 使用者在shell中可以操作的指令或可执行档 2 系統核心可呼叫的函数与工具等 3 一 ...
- 《Java程序设计》实验三（敏捷开发与XP实践）20155214 实验报告
<JAVA程序设计> 实验三(敏捷开发与XP实践) 实验内容 XP基础 XP核心实践 相关工具 实验要求 没有Linux基础的同学建议先学习<Linux基础入门(新版)>< ...
- 与Linux的第一次遭遇
我的与linux首次遭遇战 虚拟机安装 安装虚拟机我遇到的问题个数可以缩减到1--我几乎没遇到安装虚拟机的问题!我严格按照老师给的链接去下载那个VirtualBox,尽管那个网页是全英文的,但是我像看 ...
- 20155226 实验三 敏捷开发与XP实践 实验报告
20155226 实验三 敏捷开发与XP实践 实验报告 实验内容 XP基础 XP核心实践 相关工具 实验要求 没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim ...
- echarts设置小图标位置
// <!-- 左上角小图标 --> toolbox: { show : true, // orient: 'horizontal', // 布局方式,默认为水平布局,可选为: // // ...
- 利用 Python 分析微信好友性别和位置
今天用到一个非常有意思的库——itchat,它已经完成了 wechat 的个人账号API接口,使爬取个人微信信息更加方便. 下载 爬取微信好友信息 这样就将你所有微信好友的信息都返回了,我们并不需要 ...
- Jenkins Tomcat安装设置
Jenkins Tomcat安装设置 以下为必须满足Jenkins Tomcat设置的先决条件. 第1步:验证安装Java 要验证Java安装,打开控制台并执行以下Java命令. OS 任务 命令 W ...
- 三、Django之请求与响应-Part 1
一.新建项目 进入你指定的项目保存目录,然后运行下面的命令: $ django-admin startproject mysite 这将在目录下生成一个mysite目录,也就是你的这个Django项目 ...
- 详解Python中的下划线
本文将讨论Python中下划线(_)字符的使用方法.我们将会看到,正如Python中的很多事情,下划线的不同用法大多数(并非所有)只是常用惯例而已. 单下划线(_) 通常情况下,会在以下3种场景中使用 ...
- Oracle数据库拼音首字母模糊搜索
1.建立函数 CREATE OR REPLACE FUNCTION F_PINYIN(P_NAME IN VARCHAR2) RETURN VARCHAR2 AS V_COMPARE ); V_RET ...