解析JSON文件的方法
(1)先封裝ajax文件
function ajaxFun(obj) {
//1、創(chuàng)建請(qǐng)求對(duì)象
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
//2离钝、判斷請(qǐng)求方法
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('你請(qǐng)求的方式有誤忿薇，必須是GET或POST中的一種')
}
//服務(wù)器返回情況
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
obj.successFun(xhr.responseText);
}else{
obj.failFun('請(qǐng)求有誤')
}
}
}
}
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">
//拼接請(qǐng)求參數(shù)
//字面量創(chuàng)件函數(shù)
var obj = {
method: 'GET',
url: 'car.json',
data: '',
successFun: successFun,
failFun: failFun
};
//調(diào)用ajax請(qǐng)求函數(shù)
ajaxFun(obj);
//請(qǐng)求成功的函數(shù)
function successFun(data) {
//alert(data);
//解析請(qǐng)求下來(lái)的數(shù)據(jù)
//把返回的json數(shù)據(jù)轉(zhuǎn)換成js對(duì)象佛纫，對(duì)象可以通過(guò)屬性獲取值
var resultObj = JSON.parse(data);
//console.log(resultObj)
//獲取到ListContents屬性下的數(shù)組(展現(xiàn)在頁(yè)面中的數(shù)據(jù)就保存在這個(gè)數(shù)組中)
var contentsArray = resultObj.ListContents;
//console.log(contentsArray)
//在 js 中 for in 遍歷時(shí),自定義的變量中保存的是數(shù)組的下標(biāo)
var arr = new Array;
//拿到的分組的汽車數(shù)據(jù)
for(var i in contentsArray) {
var sectionObj = contentsArray[i];
//繼續(xù)解析分組信息的對(duì)象残吩，找到該分組下的汽車信息
var carsArray = sectionObj.GroupInfo;
//遍歷汽車的數(shù)組缰趋，拿到數(shù)組的中的汽車對(duì)象
for(var j in carsArray) {
var carObj = carsArray[j];
//把解析出來(lái)的汽車數(shù)組轉(zhuǎn)存進(jìn)大數(shù)組中
arr.push(carObj);
}
}
//檢測(cè)arr數(shù)組中數(shù)組的信息
//console.log(arr);
//解析arr數(shù)組捧杉，提取出汽車的信息
for(var k in arr) {
var busObj = arr[k];
console.log(busObj);
//創(chuàng)建DOM節(jié)點(diǎn)，把數(shù)據(jù)拼接新對(duì)應(yīng)的節(jié)點(diǎn)中
//創(chuàng)建行節(jié)點(diǎn)埠胖，每循環(huán)一次新建一行
var tr = document.createElement("tr");
//創(chuàng)建列節(jié)點(diǎn)
var tdID = document.createElement("td");
var tdName = document.createElement("td")
var tdLogo = document.createElement("td");
//把解析出來(lái)的數(shù)據(jù)添加進(jìn)對(duì)應(yīng)的節(jié)點(diǎn)中
tdID.textContent = busObj.BrandID;
tdName.innerHTML = busObj.MainBrandName;
//窗簾出存放圖片的img標(biāo)簽
var img = document.createElement("img");
img.src = busObj.imgURL; // 屬性
//把圖片標(biāo)簽拼接進(jìn)tdLogo標(biāo)簽中
tdLogo.appendChild(img);
//把td標(biāo)簽拼接進(jìn)tr中
tr.appendChild(tdID);
tr.appendChild(tdName);
tr.appendChild(tdLogo);
//把tr拼接進(jìn)文檔流(拼接經(jīng)table標(biāo)簽)
var table = document.getElementById("table")
table.appendChild(tr);
}
}
//請(qǐng)求失敗的函數(shù)
function failFun(data) {
//alert(data)
}
</script>
</head>
<body>
<!--固定的頁(yè)面布局 一個(gè)表格 一個(gè)表頭-->
<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>
復(fù)制代碼
