Ajax 解析本地json文件

来源：互联网发布：c语言的三种数据类型编辑：程序博客网时间：2024/06/16 00:00

代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">#info{color: greenyellow;margin-left: 50px;}</style></head><body><div id=""><div id="info"></div><form ><input type="button" name="submit" id="submit" value="显示" /><div id="bookInfo"></div></form></div><script type="text/javascript">window.onload = function() {var btn = document.getElementById("submit");btn.onclick = function(){var xhr = null;if(window.XMLHttpRequest){xhr = new XMLHttpRequest();}else{xhr = new ActiveXObject("Microsoft.XHLHTTP");}var url = './json.json';//注意这里的urlxhr.open("GET",url,true);xhr.onreadystatechange = function(){if(xhr.readyState== 4){if(xhr.status == 200){var data = JSON.parse(xhr.responseText);//eval()有风险！console.log(data);var total = data.total;var list = data.data;var tag = "";for(var i=0;i<total;i++){var book = list[i];tag += '<tr><td>'+book.name+'</td><td>'+book.category+'</td><td>'+book.desc+'</td></tr>';}var tbody = document.createElement('tbody');//创建的tbody节点，因为tag 内容有tr、td标签tbody.innerHTML = tag;document.getElementById('bookInfo').appendChild(tbody);}}}xhr.send();}}</script></body></html>

json 内容为：

{
"total":"4",
"data":[
{
"name":"书籍1",
"category":"文学",
"desc":"一个军阀混乱的年代"
},
{
"name":"书籍2",
"category":"文学2",
"desc":"一个军阀混乱的年代"
},
{
"name":"书籍3",
"category":"文学3",
"desc":"一个军阀混乱的年代"
},
{
"name":"书籍4",
"category":"文学4",
"desc":"一个军阀混乱的年代"
}
]
}

阅读全文

0 0