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

json

适用于现代 C++ 的 JSON。

项目地址：https://gitcode.com/gh_mirrors/js/json

免费下载资源

lily2016n

5825人浏览 · 2018-01-31 17:40:29

lily2016n · 2018-01-31 17:40:29 发布

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

<!DOCTYPE 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>Document</title>
    <link rel="stylesheet" type="text/css" href="css/master.css">

</head>
<body>
     <div class="lists">
        <!-- <div class="info">
            <div class="order">
                <span class="num">订单编号:  12345678901</span>
                <span class="state">待发货</span>
            </div>
            <div class="info-material">
                <div class="pic_one">
                    <img src="img/goumai.png"/>
                    <div class="info_one">
                        <span class="name">蓝山咖啡</span>
                        <span class="money">¥ 89.9</span>
                    </div>
                    <div class="info_two">
                        <span class="height">净含量: 800g/袋</span>
                        <span class="count">x1</span>
                    </div>
                </div>  
            </div>
            <div class="details">
                <p>下单时间: 2017-09-01 12:12:12</p>
                <p>共2件商品  运费合计 ¥ 60.0</p>
                <p>实付 ¥ 89.9</p>
            </div>
        </div> -->
    </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 += '<div class="info-material">'+
                                        '<div class="pic_one">'+
                                            '<img src= '+ Img +'/>'+
                                            '<div class="info_one">'+
                                                '<span class="name">'+ Name +'</span>'+
                                                '<span class="money">¥'+ Price +'</span>'+
                                        '</div>'+
                                      '<div class="info_two">'+
                                          '<span class="height">净含量: '+ Quality +'</span>'+
                                          '<span class="count">x'+ Number +'</span>'+
                                       '</div>'+
                                   '</div>'+
                              ' </div>'
                        })
                    }
                    result += ' <div class="info">'+
                                  ' <div class="order">'+
                                        '<span class="num">订单编号:  '+ Num +'</span>'+
                                        '<span class="state">'+ Logo +'</span>'+
                                   ' </div>'+ t +
                                   ' <div class="details">'+
                                        '<p>下单时间: '+ Time +'</p>'+
                                        '<p>共2件商品  运费合计 ¥ '+ money +'</p>'+
                                        '<p>实付 ¥ '+ Pay +'</p>'+
                                   ' </div>'+
                            '</div>'

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

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

效果图
这里写图片描述

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

GitHub 加速计划 / js / json

下载

适用于现代 C++ 的 JSON。

最近提交(Master分支：5 个月前 )

34665ae6 binary -> binary_t Signed-off-by: Robert Chisholm <robert.chisholm@sheffield.ac.uk> 15 天前

f3dc4684 Bumps [github/codeql-action](https://github.com/github/codeql-action) from 3.28.9 to 3.28.10. - [Release notes](https://github.com/github/codeql-action/releases) - [Changelog](https://github.com/github/codeql-action/blob/main/CHANGELOG.md) - [Commits](https://github.com/github/codeql-action/compare/9e8d0789d4a0fa9ceb6b1738f7e269594bdd67f0...b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d) --- updated-dependencies: - dependency-name: github/codeql-action dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> 22 天前