JSON数据交互处理

最新推荐文章于 2023-07-18 11:39:16 发布

Tw368WJZ

最新推荐文章于 2023-07-18 11:39:16 发布

阅读量476

点赞数

分类专栏： html 函数 json

本文链接：https://blog.csdn.net/Tw368WJZ/article/details/79601366

版权

html 同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

函数

5 篇文章 0 订阅

订阅专栏

json

1 篇文章 0 订阅

订阅专栏

本文详细探讨了JSON作为数据交换格式的使用，包括其结构、解析与生成过程，以及在前后端交互中的重要角色。通过实例解析，展示了如何有效地处理和传输JSON数据。

摘要由CSDN通过智能技术生成

JSON数据交互处理

<!DOCTYPE html>
<html>
<head>
    <title>jquery</title>
</head>
<style type="text/css">
    .one{

        text-align: center;
        overflow: hidden;
        width: 700px;
        height: 950px;
        border: 1px red solid;
        margin: 0px auto;
        padding-bottom: 20px;: 

    }
    .divA{
        width: 100%;
        height: 50px;
        text-align: center;
        border: 1px red solid;
    }
    .divB{
        width: 200px;
        height: 400px;
        text-align: center;
        border: 1px red solid;
        margin: 15px;
        float: left;
    }
    .divB1{
        width: 180px;
        height: 150px;
        border: 1px red solid;
        margin: 8px;
        background-image: url(1.png);
        background-size: 180px 150px;
    }
    .divB10{
        width: 180px;
        border: 1px red solid;
        margin: 10px;

    }
    p{
        display:inline-block;

    }
</style>
<body>

</body>
<script type="text/javascript">
    var list = '{"address":"泗泾镇九干路168号","shopList":[{"name":"1众一品过桥米线","cd":[{"title":"2黄焖鸡大份微辣","pir":"20","pl":["3土豆","鸡肉","姜","青椒"]},{"title":"4黄焖鸡大份中辣","pir":"20","pl":["5土豆","鸡肉","姜","尖椒"]},{"title":"6黄焖鸡大份重辣","pir":"20","pl":["7土豆","鸡肉","姜","5个尖椒"]}]},{"name":"8老友记黄焖鸡","cd":[{"title":"9肥牛米线","pir":"20","pl":["10米线","青菜","肥牛","豆芽"]},{"title":"11鱼豆腐米线","pir":"18","pl":["12米线","青菜","鱼豆腐","豆芽"]},{"title":"香菇米线","pir":"16","pl":["13米线","青菜","香菇","豆芽"]}]},{"name":"14众一品黄焖鸭","cd":[{"title":"14肥牛米线","pir":"20","pl":["15米线","青菜","肥牛","豆芽"]},{"title":"16鱼豆腐米线","pir":"18","pl":["17米线","青菜","鱼豆腐","豆芽"]},{"title":"18香菇米线","pir":"16","pl":["19米线","青菜","香菇","豆芽"]}]},{"name":"众一品黄焖猪","cd":[{"title":"20肥牛米线","pir":"20","pl":["米线","青菜","肥牛","豆芽"]},{"title":"21鱼豆腐米线","pir":"18","pl":["米线","青菜","鱼豆腐","豆芽"]},{"title":"22香菇米线","pir":"16","pl":["米线","青菜","香菇","豆芽"]}]},{"name":"23众一品黄焖狗","cd":[{"title":"24肥牛米线","pir":"20","pl":["米线","青菜","肥牛","豆芽"]},{"title":"25鱼豆腐米线","pir":"18","pl":["米线","青菜","鱼豆腐","豆芽"]},{"title":"26香菇米线","pir":"16","pl":["米线","青菜","香菇","豆芽"]}]}]}';

    var listObj = JSON.parse(list);// 以JSON解析list
    console.log(listObj);
    var body = document.getElementsByTagName('body')[0];
    var div1 = document.createElement("div");
    var divA = document.createElement("div");

    div1.innerHTML = "<p>地址:</p>"+listObj.address;
    divA.innerHTML = "<p>商家:</p>";

    // divB10.innerHTML = listObj.shopList[0].cd[0].title + "<br/>" +
    // listObj.shopList[0].cd[0].pl[0];
    body.appendChild(div1);
    div1.appendChild(divA);

    for (var i = 0; i <=listObj.shopList.length-1; i++) {

    var divB = document.createElement("div");
    var divB1 = document.createElement("div");
    var divB10 = document.createElement("div");
    divB.innerHTML = "<p>商品:</p>"+listObj.shopList[i].name;


        for(var j = 0 ; j <= listObj.shopList[i].cd.length-1 ; j++ )
        {
           divB10.innerHTML = listObj.shopList[i].cd[j].title + "<br/>";
           divB10.innerHTML = divB10.innerHTML + "价格: " + listObj.shopList[i].cd[j].pir + "<br/>";
              for(k = 0 ; k <= listObj.shopList[i].cd[j].pl.length-1; k++){
                 divB10.innerHTML = divB10.innerHTML + listObj.shopList[i].cd[j].pl[k] + "<br/>";
              }

           }
        div1.appendChild(divB);
        divB.appendChild(divB1);
        divB.appendChild(divB10);

        div1.className="one";
        divA.className='divA';
        divB.className="divB";
        divB1.className = 'divB1';
        divB10.className = "divB10";
    }
    // divB.insertBefore(divB10,divB1);//把divB10放到divB1前面

</script>
</html>