ajax请求嵌套多层json数据实例

2019-04-15 16:10发布生成海报

站内文章 / PIC单片机

11960 0

class="markdown_views prism-atom-one-light"> json

{
    "lists": [
        {
            "num": "4003000001",
            "logo": "已发货",
            "pic": [
                {
                    "img": "img/goumai.png",
                    "name": "方便面",
                    "price": "6",
                    "height": "800g/袋",
                    "number": "1"
                },
                {
                    "img": "img/goumai.png",
                    "name": "绿茶1",
                    "price": "7",
                    "height": "600g/袋",
                    "number": "2"
                },
                {
                    "img": "img/goumai.png",
                    "name": "绿茶2",
                    "price": "7",
                    "height": "600g/袋",
                    "number": "2"
                }
            ],
            "createtime": "2017-09-01",
            "count": "2",
            "yun": "60.0",
            "pay": "90"
        },
        {
            "num": "4003000002",
            "logo": "未发货",
            "pic": [
                {
                    "img": "img/goumai.png",
                    "name": "营养快线",
                    "price": "6",
                    "height": "800g/瓶",
                    "number": "1"
                },
                {
                    "img": "img/goumai.png",
                    "name": "红茶",
                    "price": "7",
                    "height": "600g/袋",
                    "number": "3"
                }
            ],
            "createtime": "2017-09-05",
            "count": "2",
            "yun": "60.0",
            "pay": "90"
        },
        {
            "num": "4003000003",
            "logo": "已发货",
            "pic": [
                {
                    "img": "img/goumai.png",
                    "name": "咖啡豆",
                    "price": "6",
                    "height": "800g/袋",
                    "number": "1"
                },
                {
                    "img": "img/goumai.png",
                    "name": "牛奶",
                    "price": "7",
                    "height": "600g/袋",
                    "number": "1"
                }
            ],
            "createtime": "2017-09-09",
            "count": "2",
            "yun": "60.0",
            "pay": "90"
        },
        {
            "num": "4003000004",
            "logo": "已发货",
            "pic": [
                {
                    "img": "img/goumai.png",
                    "name": "绿茶1",
                    "price": "3",
                    "height": "1000ml/瓶",
                    "number": "1"
                },
                {
                    "img": "img/goumai.png",
                    "name": "绿茶2",
                    "price": "4",
                    "height": "1000ml/瓶",
                    "number": "1"
                }
            ],
            "createtime": "2017-09-21",
            "count": "2",
            "yun": "60.0",
            "pay": "90"
        }
    ]
}

html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta content="yes" name="app-moblie-web-app-capable">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>Documenttitle>
    <link rel="stylesheet" type="text/css" href="css/master.css">

head>
<body>
     <div class="lists">
        
    div>  
body>
<script type="text/javascript" src="js/jquery-1.12.3.js">script>
<script type="text/javascript" src="js/myjs.js">script>
<script type="text/javascript">
    $(function(){
        $.ajax({
            type:'GET',
            url:'js/details.json', //请求数据的地址
            dataType:'json',  //返回数据形式为json
            success:function(result){ //请求成功时执行该函数内容，result即为服务器返回的json对象
                var json = result.lists;
                var result = '';
                $.each(json,function(index){
                    var Num = json[index].num;
                    var Logo = json[index].logo;
                    var Pic = json[index].pic;
                    var Time = json[index].createtime;
                    var Count = json[index].count;
                    var money = json[index].yun;
                    var Pay = json[index].pay;
                    var t = '';
                    if (Pic.length > 0) {
                            $.each(Pic,function(i){
                            var Img = Pic[i].img;
                            var Name = Pic[i].name;
                            var Price = Pic[i].price;
                            var Quality = Pic[i].height;
                            var Number = Pic[i].number;
                            t += ''+
                                        ''+
                                            ''+
                                            ''+
                                                ''+ Name +''+
                                                '¥'+ Price +''+
                                        '
'+
                                      ''+
                                          '净含量: '+ Quality +''+
                                          'x'+ Number +''+
                                       '
'+
                                   '
'+
                              ' 
'
                        })
                    }
                    result += ' '+
                                  ' '+
                                        '订单编号:  '+ Num +''+
                                        ''+ Logo +''+
                                   ' 
'+ t +
                                   ' '+
                                        '下单时间: '+ Time +'
'+
                                        '共2件商品  运费合计 ¥ '+ money +'
'+
                                        '实付 ¥ '+ Pay +'
'+
                                   ' 
'+
                            '
'

                })
                $('.lists').html(result);

            },
            error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("发生错误!");   
            }
        })
    })
script>
html>

效果图

源码地址 http://download.csdn.net/download/lily2016n/10234021

Ta的文章更多 >>

ajax请求嵌套多层json数据实例
0 个评论

ajax请求嵌套多层json数据实例

Ta的文章 更多 >>

热门文章

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

Ta的文章更多 >>