用jaxa做一个简单的菜谱Demo

最新推荐文章于 2023-05-05 09:25:58 发布

Endless-love

最新推荐文章于 2023-05-05 09:25:58 发布

阅读量386

点赞数

分类专栏： jaxa 关于前端的技术探讨文章标签： jaxa

本文链接：https://blog.csdn.net/Stay_Hungry_Stay/article/details/81210606

版权

关于前端的技术探讨同时被 2 个专栏收录

28 篇文章 1 订阅

订阅专栏

jaxa

3 篇文章 0 订阅

订阅专栏

用jaxa做一个简单的菜谱

jquery-3.3.1.js

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="js/jquery-3.3.1.js"></script>

</head>

<body>

    <input type="text" class="input">

    <button class="button">获取数据</button>

    <div class="div"></div>

    <script>

       $(function(){

           $('.button').click(function() {

               var menu = $('.input').val();

               jQuery.ajax({

                 url: 'http://apis.juhe.cn/cook/query.php?key=80a0772ebacf790e6dea801e568cfac5',

                 dataType: 'jsonp',

                 data: {menu: menu},

                 success: function(data) {

                      var $res = data.result.data;

                      $.each($res,function(i,v){

                      var li = $('<img src='+v.albums+'></li>');

                      li.appendTo($('.div').eq(0));

                      var li = $('<li>'+v.burden+'</li>');

                      li.appendTo($('.div').eq(0));

                      var li = $('<li>'+v.id+'</li>');

                      li.appendTo($('.div').eq(0));

                      var li = $('<li>'+v.title+'</li>');

                      li.appendTo($('.div').eq(0));

                      var li = $('<li>'+v.tags+'</li>');

                      li.appendTo($('.div').eq(0));

                      var li = $('<li>'+v.imtro+'</li>');

                      li.appendTo($('.div').eq(0));

                      var li = $('<li>'+v.ingredients+'</li>');

                      li.appendTo($('.div').eq(0));

                      $.each(v.steps,function(i,v){

                        var img = $('<img src='+v.img+'></img>');

                        img.appendTo($('.div').eq(0));

                        var li = $('<li>'+v.step+'</li>');

                        li.appendTo($('.div').eq(0));

                      })

                    })

                 },

                 error: function() {

                   console.log('请求失败！')

                 }

               });

           });

       })

    </script>

</body>

</html>

Endless-love

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用jaxa做一个简单的菜谱Demo

用jaxa做一个简单的菜谱jquery-3.3.1.js&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;script s
复制链接

扫一扫