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