用jaxa做一个简单的菜谱Demo

用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>
用jaxa做一个简单的菜谱Demo

用jaxa做一个简单的菜谱

猜你喜欢
