解析JSON文件的方法
(1)先封装ajax文件
function ajaxFun(obj) {
//1、创建请求对象
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
//2、判断请求方法
var method = obj.method.toUpperCase();
if(method == 'GET') {
xhr.open('GET', obj.url + '?' + obj.data, true)
xhr.send(null);
} else if(method == 'POST') {
xhr.open('POST', obj.url, true);
xhr.send(obj.data);
} else {
console.error('你请求的方式有误，必须是GET或POST中的一种')
}
//服务器返回情况
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
obj.successFun(xhr.responseText);
}else{
obj.failFun('请求有误')
}
}
}
}
2、写解析json文件的HTML 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>
<script src="ajax.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//拼接请求参数
//字面量创件函数
var obj = {
method: 'GET',
url: 'car.json',
data: '',
successFun: successFun,
failFun: failFun
};
//调用ajax请求函数
ajaxFun(obj);
//请求成功的函数
function successFun(data) {
//alert(data);
//解析请求下来的数据
//把返回的json数据转换成js对象，对象可以通过属性获取值
var resultObj = JSON.parse(data);
//console.log(resultObj)
//获取到ListContents属性下的数组(展现在页面中的数据就保存在这个数组中)
var contentsArray = resultObj.ListContents;
//console.log(contentsArray)
//在 js 中 for in 遍历时,自定义的变量中保存的是数组的下标
var arr = new Array;
//拿到的分组的汽车数据
for(var i in contentsArray) {
var sectionObj = contentsArray[i];
//继续解析分组信息的对象，找到该分组下的汽车信息
var carsArray = sectionObj.GroupInfo;
//遍历汽车的数组，拿到数组的中的汽车对象
for(var j in carsArray) {
var carObj = carsArray[j];
//把解析出来的汽车数组转存进大数组中
arr.push(carObj);
}
}
//检测arr数组中数组的信息
//console.log(arr);
//解析arr数组，提取出汽车的信息
for(var k in arr) {
var busObj = arr[k];
console.log(busObj);
//创建DOM节点，把数据拼接新对应的节点中
//创建行节点，每循环一次新建一行
var tr = document.createElement("tr");
//创建列节点
var tdID = document.createElement("td");
var tdName = document.createElement("td")
var tdLogo = document.createElement("td");
//把解析出来的数据添加进对应的节点中
tdID.textContent = busObj.BrandID;
tdName.innerHTML = busObj.MainBrandName;
//窗帘出存放图片的img标签
var img = document.createElement("img");
img.src = busObj.imgURL; // 属性
//把图片标签拼接进tdLogo标签中
tdLogo.appendChild(img);
//把td标签拼接进tr中
tr.appendChild(tdID);
tr.appendChild(tdName);
tr.appendChild(tdLogo);
//把tr拼接进文档流(拼接经table标签)
var table = document.getElementById("table")
table.appendChild(tr);
}
}
//请求失败的函数
function failFun(data) {
//alert(data)
}
</script>
</head>
<body>
<!--固定的页面布局 一个表格 一个表头-->
<table id="table" border="1" cellspacing="0" cellpadding="0">
<!--表头-->
<tr height="30">
<th width="200">品牌ID</th>
<th width="100">品牌名称</th>
<th width="100">品牌Logo</th>
</tr>
</table>
</body>
</html>
复制代码
