JSON（及其在ajax前后端交互的過程）小識

一. json介紹

json是一種輕量級的數據交換格式，規則很簡單：

1. 並列的數據之間用逗號（,）分隔；
2. 映射用冒號（:）表示；
3. 並列數據的集合（數組）用方括號（[]）表示；
4. 映射的集合（對象）用大括號（{}）表示。
   對上述規則解析，可以發現：

• 數組是用（[]）創建的，對象是用（{}）創建的；
• 數組和對象里面的元素都是用（,）隔開：{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，前后端之相交脈絡亦了然一二。更覺前端道阻且長，唯上下八方求索，方不落人后。