js进阶ajax读取json数据（ajax读取json和读取普通文本，和获取服务器返回数据（链接）都是一样的，在url处放上json文件的地址即可）
一、总结
ajax读取json和读取普通文本，和获取服务器返回数据（链接）都是一样的，在url处放上json文件的地址即可
var lii=document.createElement('li'); //3、dom动态创建元素document.createElement
div1.appendChild(lii) //4、dom动态给元素添加孩子
var obj=JSON.parse(str) //2、解析json：将json从字符串转化为数组或对象
二、js进阶ajax读取json数据
json中数据：
[
{
"name":"张三",
"id":123456,
"sex":"男",
"VIP":"lv1"
},
{
"name":"李四",
"id":123457,
"sex":"男",
"VIP":"lv3"
},
{
"name":"李丽",
"id":123458,
"sex":"女",
"VIP":"lv2"
}
]
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax01</title>
<style type="text/css">
div{
background: rgba(30,100,30,0.3);
width: 500px;
height: 500px;
letter-spacing: 5px;
padding: 5px
} </style>
<script type="text/javascript" src="ajax1.js"></script>
</head>
<body>
<input type="button" id="btn" value="测试按钮">
<div id="div1"></div>
<script>
var btn=document.getElementById('btn');
var div1=document.getElementById('div1');
btn.onclick=function (){
ajax('data.json',function(str){ //1、ajax读取json和读取普通文本，和读取链接都是一样的，在url处放上json文件的地址即可
var obj=JSON.parse(str) //2、解析json：将json从字符串转化为数组或对象
//alert(typeof obj)
for(var i in obj){
for(var j in obj[i]){
// div1.innerHTML+=j+':'+obj[i][j]+'<br>';
var lii=document.createElement('li'); //3、dom动态创建元素document.createElement
lii.innerHTML=j+':'+obj[i][j];
div1.appendChild(lii) //4、dom动态给元素添加孩子
} } },function(s){
alert(s)
})
}
</script>
</body>
</html>