获取json数据

来源：互联网发布：网络食品安全新规编辑：程序博客网时间：2024/06/05 02:59
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title> <style lang="">   span{     display: block   }   .first{     overflow: hidden;     border: 1px solid   }   .two{     margin-top: 20px;     border: 1px solid black   }   p{     background: red   } </style></head><body>  <div class="first">    <p>获取所有的value值</p>    <div id="con"></div>    <span id="names">11</span>    <span id="sex">22</span>    <span id="age">33</span>  </div>  <div class="two">    <p>获取第一条数据name的value值</p>    <div id="con2"></div>    <div id="msg"></div>    <div id="msgg"></div>    <div id="msg1"></div>    <div id="msg2"></div>  </div>  <div class="two">    <p>获取第一条数据name的value值</p>    <div id="threemsg"></div>    <div id="con3"></div>  </div>  <div class="two">    <p>获取第三条数据sex的value值</p>    <div id="fourmsg"></div>    <div id="con4"></div>  </div>  <script>    //第一个    var object={      "name":"张珊",      "sex":"女",      "age":"18"    }    var obj=JSON.stringify(object);    document.getElementById("con").innerHTML=obj;    document.getElementById("names").innerHTML="姓名："+object["name"];    document.getElementById("sex").innerHTML="性别："+object["sex"];    document.getElementById("age").innerHTML="年龄："+object["age"];    //第二个    var object2=[      {        "name":"张珊",        "sex":"女",        "age":"18"},      {        "name":"李四",        "sex":"男",        "age":"20"      },      {        "name":"王五",        "sex":"人妖",        "age":"45"      }    ]    var obj2=JSON.stringify(object2);    document.getElementById("con2").innerHTML=obj2;    document.getElementById("msg").innerHTML=JSON.stringify(object2[0]);    document.getElementById("msgg").innerHTML=JSON.stringify(object2[0].name);    document.getElementById("msg1").innerHTML=JSON.stringify(object2[1]);    document.getElementById("msg2").innerHTML=JSON.stringify(object2[2]);    //第三个    var object3={      "side":[        {        "name":"张珊",        "sex":"女",        "age":"18"},        {          "name":"李四",          "sex":"男",          "age":"20"        },        {          "name":"王五",          "sex":"人妖",          "age":"45"        }      ]    }    var obj3=JSON.stringify(object3.side);    document.getElementById("threemsg").innerHTML=JSON.stringify(object3);    document.getElementById("con3").innerHTML=JSON.stringify(object3.side[0].name);    //第四个    var object4={      "sides":{        "side":[          {          "name":"张珊",          "sex":"女",          "age":"18"},          {            "name":"李四",            "sex":"男",            "age":"20"          },          {            "name":"王五",            "sex":"人妖",            "age":"45"          }        ]      }    }     var obj4=JSON.stringify(object4.sides.side);    document.getElementById("fourmsg").innerHTML=JSON.stringify(object4);    document.getElementById("con4").innerHTML=JSON.stringify(object4.sides.side[2].sex);    //跨域    var xhr=new XMLHttpRequest();    xhr.open("GET",'json.txt',true);    xhr.send();    xhr.onreadystatechange=function(){      if(this.readyState==4){        if(this.status==200){          var data=JSON.stringify(this.response);          console.log(data);        }      }    }  </script></body></html>
0 0