JSON与JS一起使用代码示例

最新推荐文章于 2024-02-05 00:30:00 发布

liurongsheng123

最新推荐文章于 2024-02-05 00:30:00 发布

阅读量763

点赞数 1

分类专栏：前端文章标签： js json

本文链接：https://blog.csdn.net/liurongsheng123/article/details/79603393

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

JSON与JS一起使用代码示例

前提

前提,建立一个文件夹,这个文件夹设置为公开的,允许被访问的,然后在该文件夹中
建立一个text.json文件,
里面用json语法写出正确的语句放入text.json文件夹中,然后在该文件夹中再建立一个后缀名为html文件

AJAX1.json

{"address":"泗泾镇九干路168号","shopList":[{"name":"众一品过桥米线","cd":[{"title":"黄焖鸡大份微辣","pir":"20",
"pl":["土豆","鸡肉","姜","青椒"]},{"title":"黄焖鸡大份中辣","pir":"20","pl":["土豆","鸡肉","姜","尖椒"]},
{"title":"黄焖鸡大份重辣","pir":"20","pl":["土豆","鸡肉","姜","5个尖椒"]}]},
{"name":"众一品黄焖鸡","cd":[{"title":"肥牛米线","pir":"20","pl":["米线","青菜","肥牛","豆芽"]},
{"title":"鱼豆腐米线","pir":"18","pl":["米线","青菜","鱼豆腐","豆芽"]},
{"title":"香菇米线","pir":"16","pl":["米线","青菜","香菇","豆芽"]}]},
{"name":"众一品黄焖鸡","cd":[{"title":"肥牛米线","pir":"20","pl":["米线","青菜","肥牛","豆芽"]},
{"title":"鱼豆腐米线","pir":"18","pl":["米线","青菜","鱼豆腐","豆芽"]},{"title":"香菇米线","pir":"16","pl":["米线","青菜","香菇","豆芽"]}]},
{"name":"众一品黄焖鸡","cd":[{"title":"肥牛米线","pir":"20","pl":["米线","青菜","肥牛","豆芽"]},
{"title":"鱼豆腐米线","pir":"18","pl":["米线","青菜","鱼豆腐","豆芽"]},
{"title":"香菇米线","pir":"16","pl":["米线","青菜","香菇","豆芽"]}]},
{"name":"众一品黄焖鸡","cd":[{"title":"肥牛米线","pir":"20","pl":["米线","青菜","肥牛","豆芽"]},
{"title":"鱼豆腐米线","pir":"18","pl":["米线","青菜","鱼豆腐","豆芽"]},
{"title":"香菇米线","pir":"16","pl":["米线","青菜","香菇","豆芽"]}]}]}

text.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>JSON</title>
        <style>
            .one{
                text-align:center;
                overflow:hidden;
                width:700px;
                margin:0px auto;
                padding-left:20px;

            }
            .divA{
                text-align:center;
            }
            .divB{
                text-align:left;
                border:1px blue solid;
            }
            .two{
                padding-left:10px;
                float:left;
                width:320px;
                margin-right:10px;
                margin-top:10px;
                margin-bottom:10px;
                padding-bottom:10px;
            }
            .three{
                float:left; 
                padding-bottom:5px;
                margin-left:5px;
                margin-top:10px;
            }
            .img1{
                background-image:url(1.jpg);
                background-size:150px 100px;
                height:100px;
                border:1px red solid;
            }
        </style>
    </head>

    <body>      
    </body>
    <script type="text/javascript">
        var request = new XMLHttpRequest();
        request.open("GET","text.json",true);
        request.send();
        request.onreadystatechange=function(){
            if(request.readyState==4 && request.status==200){
                var list = request.responseText;
                console.log(list);
                var listObj = JSON.parse(list);
                var body = document.getElementsByTagName('body')[0];
                var div1 = document.createElement("div");
                var divA = document.createElement("div");
                var divB = document.createElement("div");
                div1.className="one";
                divA.className="divA";
                div1.style.border="1px blue solid";
                divA.innerHTML = "地址:" + listObj.address;
                divB.innerHTML = "商家:";
                divB.className = "divB";
                body.appendChild(div1);
                div1.appendChild(divA); 
                div1.appendChild(divB); 
                for(var i=0; i<listObj.shopList.length;i++){
                    var shop = listObj.shopList[i];
                    var div2 = document.createElement("div");
                    div2.className="two";
                    var h4 = document.createElement("h4");
                    div2.style.border="1px red solid";
                    div1.appendChild(div2);
                    div2.appendChild(h4);
                    h4.innerHTML = shop.name;   
                    for(var j=0; j<shop.cd.length;j++){
                        var div3 = document.createElement("div");
                        div2.appendChild(div3);
                        div3.style.width="150px";
                        div3.className="three";
                        div3.style.border="1px black solid";
                        var cd = shop.cd[j];
                        div3.innerHTML = cd.title;
                        var img = document.createElement("div");
                        img.className="img1";
                        div3.appendChild(img);
                        var div4 = document.createElement("div");
                        div4.innerHTML = cd.pir;
                        div3.appendChild(div4);
                        var div8 = document.createElement("div");
                        div8.innerHTML = "配料:";
                        for(var k=0; k<cd.pl.length;k++){
                            div8.innerHTML = div8.innerHTML + cd.pl[k];
                        }
                        div3.appendChild(div8);
                    }
                }
            }
        }
    </script>
</html>

结果截图

这里写图片描述

liurongsheng123

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JSON与JS一起使用代码示例

JSON与JS一起使用代码示例前提前提,建立一个文件夹,这个文件夹设置为公开的,允许被访问的,然后在该文件夹中建立一个text.json文件,里面用json语法写出正确的语句放入text.json文件夹中,然后在该文件夹中再建立一个后缀名为html文件AJAX1.json{"address":"泗泾镇九干路168号","shopList":[{"name":"众...
复制链接

扫一扫

专栏目录