js 解析json数据实现快递包裹的查询

最新推荐文章于 2021-12-07 14:16:33 发布

FYANGFEI

最新推荐文章于 2021-12-07 14:16:33 发布

阅读量2.1k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/FYANGFEI/article/details/81210472

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1，数据接口用的聚合数据的（接口收费，有次数限制，注册免费送100次）

2，此小demo使用了，js,jQuery,和json数据

3效果图

4.实现代码

注意！，jQuery的js文件自己引入，还有接口要自己注册

如有问题联系本人

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <style type="text/css" media="screen">
    ul,li{
    	list-style: none;
    }	
    </style>
</head>

<body>
    <input type="text">
    <button type="button">点击</button>
    <div class="div">
    	
    </div>
</body>
<script type="text/javascript">
$(function() {
    $('button').click(function() {
        var menu1 = $('input').val();

        
        $.ajax({

            url: 'http://apis.juhe.cn/cook/query?key=这里写自己的key(聚合数据自己可以注册)',

            data: { menu: menu1 },

            dataType: 'jsonp',

            type: 'get',

            success: function(msg) {
                var data1 = msg;
                var res = data1.result.data;
                console.log(data1);
                console.log(data1.result.data)

               $.each(res, function(index, val) {
                	 var id = val.id;
                	 var li = '<li>'+id+'</li>';
                	 $('.div').append(li);

                	 console.log(id);
                	 console.log(li);
                	 

                	 $.each(val.steps, function(index, v) {

                	 	 var im = '<img src="'+v.img+'" alt="">';
                	 	 $('.div').append(im);

                	 	 var step = '<p>'+v.step+'</p>';
                	 });

                	 var li = '<li>菜名：'+val.title+'</li>';
                	 $('.div').append(li);

                	 var li = '<li>属性：'+val.tags+'</li>';
                	 $('.div').append(li);

                	 var li = '<li>做法：'+val.burden+'</li>'
                	 $('.div').append(li);


                });

            },

            error: function() {
                console.log("还失败")
            }

        })
    });
})
</script>

</html>

FYANGFEI

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 解析json数据实现快递包裹的查询

1，数据接口用的聚合数据的（接口收费，有次数限制，注册免费送100次）2，此小demo使用了，js,jQuery,和json数据3效果图4.实现代码注意！，jQuery的js文件自己引入，还有接口要自己注册如有问题联系本人&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta ch...
复制链接

扫一扫