聚合数据接口之菜单

最新推荐文章于 2025-03-14 18:31:15 发布

honghong.zhou

最新推荐文章于 2025-03-14 18:31:15 发布

阅读量2.9k

点赞数 1

分类专栏：工具类文章标签：聚合数据网

本文链接：https://blog.csdn.net/chengQunBin/article/details/78235827

版权

工具类专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了如何使用聚合数据网的接口获取菜单数据。首先通过聚合数据官网找到所需接口并保存AppKey，接着分析接口文档，利用AppKey构造请求URL获取JSON数据。在静态页面中，通过AJAX发送异步请求，接收到数据后进行解析，最终实现在网页上展示菜单数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

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

使用过程分析

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

聚合网申请接口

一：找到你想要的接口，然后放入“我的数据”。在“我的数据”中找到AppKey，位置如下图（注意：这个东西！important）
这里写图片描述
二：点击接口，查看接口的文档。

将之前的AppKey复制到这个链接的key=之后，然后在浏览器中就可以得到返回的数据，如图

返回的是json数据，如果是在我们自己的网站自己提供的数据则可以直接请求，但是现在跨域了,所以，在链接的后面加上&dtype=jsonp&callback=handle
这里写图片描述
拿到数据，地址为：http://apis.juhe.cn/cook/query?key=03981026be0522e9a4d4c6ed99625aba&rn=3&pn=0&dtype=jsonp&callback=handle&menu=西红柿

静态页面的书写

<!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>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>
            </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>