获取json数据

<!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>

欢迎分享本文,转载请保留出处:前端ABC » 获取json数据

分享到:更多 ()

发表评论 0