遍歷幾種常見格式的json、AJAX和json
最近一段時間專案進入了前後端互動的環節，因此多次使用到了對於json的處理。其中，在對json的遍歷時出了一些問題，在網上查閱的資料也都是零零散散的，所以將今天自己的學習成果整理如下：
一.關於JSON
1.簡單概念：
~JSON（JavaScript Object Notation/javascript物件表示法），是儲存和交換文字資訊的語法；
~是輕量級的文字資料交換格式，相比於XML，更小、更快，更易解析；
~具有自我描述性，更易理解
2.語法及簡單使用：這裡不再詳細總結，W3C裡的json教程還蠻不錯的，可以在忘記用法時查詢資料：
json的使用教程
二.JSON的遍歷
1.首先簡單提一下json獨特的遍歷方法——for（var attr in json）
這裡的變數
attr和一般for迴圈裡的迴圈變數類似，但它是object型別，迴圈變數是number型
······················································································································································································································································
補充：儘量不要使用for in去遍歷陣列，因為···
對的，今天看到了這段話，由於還沒有學習到JS的面向物件部分，就先暫且記住，等以後再返回來體會。
······················································································································································································································································
2.接下來就是對於各種格式的json物件的遍歷：
A.最簡單的一種json格式：
{ "firstName":"John" , "lastName":"Doe" }
<body>
<table id="table1">
</table>
<script>
/*最簡單的json物件結構*/
var json = { "firstName":"John" , "lastName":"Doe" };
//console.log(typeof txt);
//console.log(json.length); //json物件沒有length這個方法
var html = '<tr>';
for(var attr in json){
html+='<td>'+attr+'</td><td>'+json[attr]+'</td>';
//html+='<td>'+json[attr]+'</td>';
}
html+='</tr>';
document.getElementById('table1').innerHTML+= html;
</script>
</body>Demo:
補充：
由於可用於頁面進行DOM操作的json是物件型別的變數，因此不能像陣列那樣直接用json.length的方法來獲取長度，需要通過另一種方式來得到。比如我自己封裝了一個函式，以後在需要獲取json裡key值的長度時就可以呼叫它：
function getJsonLength(json){
var length = 0;
for(var attr in json){
length++;
}
return length;
}B.需要進行兩層遍歷的json結構：
[
{"firstName":"John" , "lastName":"Doe" },
{"firstName":"Anna" , "lastName":"Smith"},
{"firstName":"Peter" , "lastName":"Jones"}
]<body>
<table id="table1">
</table>
<script>
/*需要兩層遍歷的json物件結構*/
var json = [
{"firstName":"John" , "lastName":"Doe" },
{"firstName":"Anna" , "lastName":"Smith"},
{"firstName":"Peter" , "lastName":"Jones"}
];
for(i = 0; i<getJsonLength(json); i++){
var html = '<tr>';
for(var attr in json[i]){
html+='<td>'+ json[i][attr] +'</td>';
console.log(json[i][attr]);
}
html+='</tr>';
document.getElementById('table1').innerHTML+= html;
}
</script>
</body>Demo:
C.含有陣列格式的json物件：
{
"employees" :[
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}<body>
<table id="table1">
</table>
<script>
/*json陣列*/
var json = { "employees" : [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
};
//這裡標準的遍歷方法其實還是隻用for in迴圈，陣列名“employees”是最外層的key值，冒號右面所有內容為最外層的value值；而冒號內部又分別是一個個的key-value
//還有一種更直接的json陣列，如：
/*var data ={'A號樓':['1層01號裝置','1層02號裝置','1層03號裝置','2層01號裝置','2層02號裝置','3層01號裝置','3層02號裝置']};*/
//整個陣列冒號左邊陣列名就是key值，冒號右邊就是value值
for(var i =0 ; i<json.employees.length; i++){
var html = '<tr>';
for(var attr in json.employees[i]){
html+='<td>'+ json.employees[i][attr] +'</td>';
//console.log(json.employees[i][attr]);
}
html+='</tr>';
document.getElementById('table1').innerHTML+= html;
}
}
</script>
</body>Demo:
D.不規則的json物件
{
"username": "andy",
"age": 20,
"info": {
"tel": "123456",
"cellphone": "98765"
},
"address": [{
"city": "beijing",
"postcode": "222333"
}, {
"city": "newyork",
"postcode": "555666"
}]
}<body>
<table id="table1">
</table>
<script>
/*不規則的json物件*/
var json = {
"username": "andy",
"age": 20,
"info": {
"tel": "123456",
"cellphone": "98765"
},
"address": [{
"city": "beijing",
"postcode": "222333"
}, {
"city": "newyork",
"postcode": "555666"
}]
}
for(var i in json){
//console.log(json[i]);//在此出列印可以看到所有層級的數值
if(typeof json[i] == 'object' &&json[i]!=null){
for(var attr in json[i]){
//console.log(json[i][attr]);//在此出列印可以看到所有第二層級的數值
if(typeof json[i][attr] == 'object' &&json[i][attr]!=null){
for(var attr1 in json[i][attr]){
console.log(json[i][attr][attr1]);
}
}else{
console.log(json[i][attr]);
}
}
}else{
console.log(json[i]);
}
}
</script>
</body>Demo:
總結：其實對於所有的json，除了第一種簡單的結構之外的遍歷，大於兩層都可以用遞迴來進行遍歷
/*將上面的過程寫成遞迴*/
fn(json);
function fn(json){
for(var key in json){
if(typeof json[key] == 'object'){
fn(json[key]);
}else{
console.log(json[key]);
}
}
}三.AJAX和json
首先一段關於AJax請求的程式碼
<body>
<table id="table1">
</table>
<script src="ajax.js" charset="GB2312"></script>
<script>
ajax('aaa.txt',function(str){
//alert(typeof str);
var str = JSON.parse(str);
for(var i in str){
if(typeof str[i] == 'object' &&str[i]!=null){
for(var j in str[i]){
var html ='<tr>';
if(typeof str[i][j] == 'object' &&str[i][j]!=null){
for(var k in str[i][j]){
html +='<td>'+str[i][j][k]+'</td>';
}
}
html +='</tr>';
document.getElementById('table1').innerHTML+= html;
}
}
}
})
</script>
</body>Demo:
對於上面的程式碼作出以下幾點說明：
1.我存在本地伺服器的json文字如下：
2.在進行AJAX非同步請求時，伺服器返回的responseText是一個string型別的json字串，所以在收到返回值的時候，需要對該值進行解析，處理成javascript物件之後才能進行下一步的DOM操作：
var str = JSON.parse(str);
還有一種方法是var json = eval ("(" + txt + ")");
這兩種都是將字串轉為JSON物件，有什麼區別我目前還不清楚，以後再解決