一. json介紹 json是一種輕量級的數據交換格式，規則很簡單： 1. 併列的數據之間用逗號（,）分隔； 2. 映射用冒號（:）表示； 3. 併列數據的集合（數組）用方括弧（[]）表示； 4. 映射的集合（對象）用大括弧（{}）表示。 對上述規則解析，可以發現： 數組是用（[]）創建的，對象是用 ...
一. json介紹
json是一種輕量級的數據交換格式，規則很簡單：
- 併列的數據之間用逗號（,）分隔；
- 映射用冒號（:）表示；
- 併列數據的集合（數組）用方括弧（[]）表示；
- 映射的集合（對象）用大括弧（{}）表示。
對上述規則解析，可以發現：
- 數組是用（[]）創建的，對象是用（{}）創建的；
- 數組和對象裡面的元素都是用（,）隔開：{name:"李華",age:"18",home:"shanghai"}&&[]
- 對象和數組可以相互嵌套，一個數組中的一個元素可以是對象或數組，一個對象中的一個屬性的值也可以是一個對象或數組；
對象內部，屬性的名稱和值用（:）隔開，不能單獨存在屬性名或者值。
```
對象：
{name:"lihua",age:"18",home:"shanghai"}數組：
[{"name":"李華","age":"18","home":"上海"},{"name":"小明","age":"21","home":"北京"},{"name":"阿飛","age":"25","home":"深圳"}]
```
數組和對象都是數據的集合，除了使用符號不同，最重要的差異是：數組內的數據是有序的，而對象內的數據是無序的。
二.json在前後端數據交互中的應用
1. 服務端數據處理
1.1 json_encode
後臺將數據處理成json格式，前端通過ajax調用進行DOM操作。在php中，數組分為三類：索引數組；關聯數組；多維數組。而在javascript中，只有索引數組。
所以，php中 json_encode()只將索引數組轉成json數組格式，而將關聯數組/多維數組轉成json對象格式。
$arr = array(111,'aaa','bbb');
$arr1 = array(
'a' => 'aaa',
'b' => 222
);
$arr2 = array(
'a' => 'aaa',
'other' => array(
'bbb',1111
)
);
echo json_encode($arr); //[111,"aaa","bbb"]
echo json_encode($arr1); //{"a":"aaa","b":222}
echo json_encode($arr2); //{"a":"aaa","other":["bbb",1111]}1.2 json_decode
php對json格式的字元串進行解碼，將其轉為php常量。
下例來自php官網：
<?php
$json = '{"a":1,"b":2,"c":3,"d":4,"e":5}';
var_dump(json_decode($json)); //返回一個對象
var_dump(json_decode($json, true)); //返回一個數組
?>object(stdClass)#1 (5) {
["a"] => int(1)
["b"] => int(2)
["c"] => int(3)
["d"] => int(4)
["e"] => int(5)
}
array(5) {
["a"] => int(1)
["b"] => int(2)
["c"] => int(3)
["d"] => int(4)
["e"] => int(5)
}2.前端對json的處理
前端通過ajax請求回數據後，如果使用jquery中的$.ajax,則只需要聲明返回的數據類型dataType:'json';
如果用原生javascript解析json，則有三種方法：
- eval()
- new Function()
JSON.parse()
這裡就不贅述了，有需要的可以自行去查閱。2.1 遍歷複雜json
有時候需要對json進行迴圈遍歷，比如畫echart圖的時候，如果用json中元素的某個屬性值作為x軸數據，用另外一個屬性值作為映射值。
[{"name":"李華","age":"18","home":"上海"},{"name":"小明","age":"21","home":"北京"},{"name":"阿飛","age":"25","home":"深圳"}]以上述json作為例子，要用name作為x軸，age作為對應值。就需要對json遍歷兩次，將所有的name屬性值push為一個數組，同樣，將所有的age屬性值push為一個數組，再賦值給相對應的坐標。
success : function(result)
data : (function(){
var arr=[];
$.ajax({
type : "post",
async : false, //同步執行
url : "test1.php",
data : {},
dataType : "json", //返回數據形式為json
success : function(result) {
if (result) {
console.log(result);
for(var i=0;i<result.length;i++){
console.log(result[i].name);
arr.push(result[i].name);
}
}
},
error : function(errorMsg) {
alert("圖表請求數據失敗啦!");
myChart.hideLoading();
}
})
return arr;
})()
//控制台列印出ajax解析之後的結果：[Object, Object, Object, Object, Object, Object, Object, Object]至此，重識JSON，前後端之相交脈絡亦瞭然一二。更覺前端道阻且長，唯上下八方求索，方不落人後。
