聚合数据接口之菜单

简介

聚合数据官网https://www.juhe.cn/,在这个网站中我们几乎能找到我们想要使用的接口。它是我国国内最大的基础数据API服务提供商。这里将用菜单的案例来学习一下如何使用聚合数据中的接口。

使用过程分析

  1. 找到数据
  2. 写静态页面
  3. 开始ajax发送异步请求拿到数据
  4. 解析数据

聚合网申请接口

一:找到你想要的接口,然后放入“我的数据”。在“我的数据”中找到AppKey,位置如下图(注意:这个东西!important)
聚合数据接口之菜单_第1张图片
二:点击接口,查看接口的文档。
聚合数据接口之菜单_第2张图片
将之前的AppKey复制到这个链接的key=之后,然后在浏览器中就可以得到返回的数据,如图
这里写图片描述
返回的是json数据,如果是在我们自己的网站自己提供的数据则可以直接请求,但是现在跨域了,所以,在链接的后面加上&dtype=jsonp&callback=handle
聚合数据接口之菜单_第3张图片
拿到数据,地址为:http://apis.juhe.cn/cook/query?key=03981026be0522e9a4d4c6ed99625aba&rn=3&pn=0&dtype=jsonp&callback=handle&menu=西红柿

静态页面的书写


            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>Titletitle>
                <style>
                    .all {
                        margin-top: 30px;
                    }
                    .xh {
                        float: left;
                        margin-right: 20px;
                        color: red;
                        font-style: italic;
                        font-size: 30px;
                    }
                    #menu {
                        width: 500px;
                    }
                style>
            head>
            <body>
            <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>
                <hr />
                <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>

ajax请求数据之后,解析数据再显示就可以了

你可能感兴趣的:(工具类)