Json詳解

JSON是一種輕量級的數據交換格式 , 易於人的閱讀和編寫 , 同時也易於機器解析和生成 , 它是基於JavaScript的。

JSON 是用於存儲和傳輸數據的格式。

JSON 通常用於服務端向網頁傳遞數據。

一、什麼是 JSON?

JSON 英文全稱 JavaScript Object NotationJSON 是一種輕量級的數據交換格式。JSON是獨立的語言 JSON 易於理解。

注意 : JSON 使用 JavaScript 語法，但是 JSON 格式僅僅是一個文本。文本可以被任何編程語言讀取及作爲數據格式傳遞。

二、JSON的語法規則

數據爲鍵/值對。
數據由逗號分隔。
大括號保存對象
方括號保存數組

2.1 JSON 數據 - 一個名稱對應一個值

JSON 數據格式爲鍵/值對，就像 JavaScript 對象屬性。

鍵/值對包括字段名稱（在雙引號中），後面一個冒號，然後是值：

"name":"Runoob"

2.2 JSON 值

JSON 值可以是：

數字（整數或浮點數）
字符串（在雙引號中）
邏輯值（true 或 false）
數組（在中括號中）
對象（在大括號中）
null

2.3 JSON 數字

JSON 數字可以是整型或者浮點型：

{ "age":30 }

2.4 JSON 對象

JSON 對象保存在大括號內。

就像在 JavaScript 中, 對象可以保存多個鍵/值對 , 用逗號隔開：

{ "name":"菜鳥教程" , "url":"www.runoob.com" }

2.5 JSON 數組

JSON 數組保存在中括號內。

就像在 JavaScript 中, 數組可以包含對象：

{
"sites": [
        { "name":"菜鳥教程" , "url":"www.runoob.com" }, 
        { "name":"google" , "url":"www.google.com" }, 
        { "name":"微博" , "url":"www.weibo.com" }
    ]
}

在以上實例中，對象 "sites" 是一個數組，包含了三個對象。

每個對象爲站點的信息（網站名和網站地址）。

2.6 JSON 布爾值

JSON 布爾值可以是 true 或者 false：

{ "flag":true }

2.7 JSON null

JSON 可以設置 null 值：

{ "runoob":null }

2.8 JSON 使用 JavaScript 語法

因爲 JSON 使用 JavaScript 語法，所以無需額外的軟件就能處理 JavaScript 中的 JSON。

通過 JavaScript，您可以創建一個對象數組，並像這樣進行賦值：

實例

var sites = [
    { "name":"runoob" , "url":"www.runoob.com" }, 
    { "name":"google" , "url":"www.google.com" }, 
    { "name":"微博" , "url":"www.weibo.com" }
];

可以像這樣訪問 JavaScript 對象數組中的第一項（索引從 0 開始）：

sites[0].name;

返回的內容是：

runoob

可以像這樣修改數據：

sites[0].name="菜鳥教程";

2.9 JSON 文件

JSON 文件的文件類型是 ".json"JSON 文本的 MIME 類型是 "application/json"

三、JSON 對象

3.1 對象語法

{ "name":"runoob", "alexa":10000, "site":null }

JSON 對象使用在大括號({})中書寫。

對象可以包含多個 key/value（鍵/值）對。

key 必須是字符串，value 可以是合法的 JSON 數據類型（字符串, 數字, 對象, 數組, 布爾值或 null）。

key 和 value 中使用冒號(:)分割。

每個 key/value 對使用逗號(,)分割。

3.2 訪問對象值

你可以使用點號（.）來訪問對象的值：

var myObj, x;
myObj = { "name":"runoob", "alexa":10000, "site":null };
x = myObj.name;      //runoob

你也可以使用中括號（[]）來訪問對象的值：

var myObj, x;
myObj = { "name":"runoob", "alexa":10000, "site":null };
x = myObj["name"];   //runoob

3.3 循環對象

你可以使用 for-in 來循環對象的屬性：

var myObj = { "name":"runoob", "alexa":10000, "site":null };
for (x in myObj) {
    document.getElementById("demo").innerHTML += x + "<br>";
}

在 for-in 循環對象的屬性時，使用中括號（[]）來訪問屬性的值：

var myObj = { "name":"runoob", "alexa":10000, "site":null };
for (x in myObj) {
    document.getElementById("demo").innerHTML += myObj[x] + "<br>";
}

3.4 嵌套 JSON 對象

JSON 對象中可以包含另外一個 JSON 對象：

myObj = {
    "name":"runoob",
    "alexa":10000,
    "sites": {
        "site1":"www.runoob.com",
        "site2":"m.runoob.com",
        "site3":"c.runoob.com"
    }
}

你可以使用點號(.)或者中括號([])來訪問嵌套的 JSON 對象。

x = myObj.sites.site1;
// 或者
x = myObj.sites["site1"];

3.5 修改值

你可以使用點號(.)來修改 JSON 對象的值：

myObj.sites.site1 = "www.google.com";

你可以使用中括號([])來修改 JSON 對象的值：

myObj.sites["site1"] = "www.google.com";

3.6 刪除對象屬性

我們可以使用 delete 關鍵字來刪除 JSON 對象的屬性：

delete myObj.sites.site1;

你可以使用中括號([])來刪除 JSON 對象的屬性：

delete myObj.sites["site1"]

3.7 json 對象和 json 字符串的區別：

json 對象

var str2 = { "name": "asan", "sex": "man" };

json字符串

var str1 = '{ "name": "deyuyi", "sex": "man" }';

四、JSON 數組

4.1 數組作爲 JSON 對象

[ "Google", "Runoob", "Taobao" ]

JSON 數組在中括號中書寫。

JSON 中數組值必須是合法的 JSON 數據類型（字符串, 數字, 對象, 數組, 布爾值或 null）。

JavaScript 中，數組值可以是以上的 JSON 數據類型，也可以是 JavaScript 的表達式，包括函數，日期，及 undefined。

4.2 JSON 對象中的數組

對象屬性的值可以是一個數組：

{
"name":"網站",
"num":3,
"sites":[ "Google", "Runoob", "Taobao" ]
}

我們可以使用索引值來訪問數組：

x = myObj.sites[0];   //Google

4.3 循環數組

你可以使用 for-in 來訪問數組：

for (i in myObj.sites) {
    x += myObj.sites[i] + "<br>";
}

也可以使用 for 循環：

for (i = 0; i < myObj.sites.length; i++) {
    x += myObj.sites[i] + "<br>";
}

4.4 嵌套 JSON 對象中的數組

JSON 對象中數組可以包含另外一個數組，或者另外一個 JSON 對象：

myObj = {
    "name":"網站",
    "num":3,
    "sites": [
        { "name":"Google", "info":[ "Android", "Google 搜索", "Google 翻譯" ] },
        { "name":"Runoob", "info":[ "菜鳥教程", "菜鳥工具", "菜鳥微信" ] },
        { "name":"Taobao", "info":[ "淘寶", "網購" ] }
    ]
}

我們可以使用 for-in 來循環訪問每個數組：

for (i in myObj.sites) {
    x += "<h1>" + myObj.sites[i].name + "</h1>";
    for (j in myObj.sites[i].info) {
        x += myObj.sites[i].info[j] + "<br>";
    }
}

4.5 修改數組值

使用索引值來修改數組值：

myObj.sites[1] = "Github";

4.6 刪除數組元素

我們可以使用 delete 關鍵字來刪除數組元素：

delete myObj.sites[1];

五、JSON.parse()

JSON 通常用於與服務端交換數據。

在接收服務器數據時一般是字符串。

我們可以使用 JSON.parse() 方法將數據轉換爲 JavaScript 對象。

JSON.parse(text[, reviver])

參數說明：

text : 必需，一個有效的 JSON 字符串。
reviver : 可選，一個轉換結果的函數，將爲對象的每個成員調用此函數。

5.1 JSON 解析實例 :

例如我們從服務器接收了以下數據：

{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }

我們使用 JSON.parse() 方法處理以上數據，將其轉換爲 JavaScript 對象：

var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');

解析完成後，我們就可以在網頁上使用 JSON 數據了：

<p id="demo"></p>
<script>
    var obj = JSON.parse('{"name":"runoob","alexa":10000,"site":"www.runoob.com" }');
    document.getElementById("demo").innerHTML = obj.name + "：" + obj.site;
</script>

5.2 從服務端接收 JSON 數據

我們可以使用 AJAX 從服務器請求 JSON 數據，並解析爲 JavaScript 對象。

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myObj.name;
    }
};
xmlhttp.open("GET", "/try/ajax/json_demo.txt", true);
xmlhttp.send();

5.3 從服務端接收數組的 JSON 數據

如果從服務端接收的是數組的 JSON 數據，則 JSON.parse 會將其轉換爲 JavaScript 數組：

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myArr = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myArr[1];
    }
};
xmlhttp.open("GET", "/try/ajax/json_demo_array.txt", true);

5.4 異常

解析數據JSON 不能存儲 Date 對象。

如果你需要存儲 Date 對象，需要將其轉換爲字符串。

之後再將字符串轉換爲 Date 對象。

var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';

var obj = JSON.parse(text);
obj.initDate = new Date(obj.initDate);

document.getElementById("demo").innerHTML = obj.name + "創建日期: " + obj.initDate;

我們可以啓用 JSON.parse 的第二個參數 reviver，一個轉換結果的函數，對象的每個成員調用此函數。

var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';
var obj = JSON.parse(text, function (key, value) {
    if (key == "initDate") {
        return new Date(value);
    } else {
        return value;
}});
 
document.getElementById("demo").innerHTML = obj.name + "創建日期：" + obj.initDate;

5.5 解析函數

JSON 不允許包含函數，但你可以將函數作爲字符串存儲，之後再將字符串轉換爲函數。

實例

var text = '{ "name":"Runoob", "alexa":"function () {return 10000;}", "site":"www.runoob.com"}';
var obj = JSON.parse(text);
obj.alexa = eval("(" + obj.alexa + ")");

document.getElementById("demo").innerHTML = obj.name + " Alexa 排名：" + obj.alexa();

注 : 不建議在 JSON 中使用函數。

六、JSON.stringify()

JSON 通常用於與服務端交換數據。

在向服務器發送數據時一般是字符串。

我們可以使用 JSON.stringify() 方法將 JavaScript 對象轉換爲字符串。

//語法
JSON.stringify(value[, replacer[, space]]);

參數說明：

value : 必需，一個有效的 JSON 對象。
replacer : 可選。用於轉換結果的函數或數組。

如果 replacer 爲函數，則 JSON.stringify 將調用該函數，並傳入每個成員的鍵和值。使用返回值而不是原始值。如果此函數返回 undefined，則排除成員。根對象的鍵是一個空字符串：""。

如果 replacer 是一個數組，則僅轉換該數組中具有鍵值的成員。成員的轉換順序與鍵在數組中的順序一樣。當 value 參數也爲數組時，將忽略 replacer 數組。

space : 可選，文本添加縮進、空格和換行符，

如果 space 是一個數字,則返回值文本在每個級別縮進指定數目的空格，如果 space 大於 10，則文本縮進 10 個空格。space 有可以使用非數字，如：\t。

6.1 JavaScript 對象轉換

例如我們向服務器發送以下數據：

var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};

我們使用 JSON.stringify() 方法處理以上數據，將其轉換爲字符串：

var myJSON = JSON.stringify(obj);

myJSON 爲字符串。

我們可以將 myJSON 發送到服務器：

var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

6.2 JavaScript 數組轉換

我們也可以將 JavaScript 數組轉換爲 JSON 字符串：

var arr = [ "Google", "Runoob", "Taobao", "Facebook" ];
var myJSON = JSON.stringify(arr);
myJSON 爲字符串。

我們可以將 myJSON 發送到服務器：

var arr = [ "Google", "Runoob", "Taobao", "Facebook" ];
var myJSON = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myJSON;

6.3 異常

解析數據JSON 不能存儲 Date 對象。

JSON.stringify() 會將所有日期轉換爲字符串。

//實例
var obj = { "name":"Runoob", "initDate":new Date(), "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

6.4 解析函數

JSON 不允許包含函數，JSON.stringify() 會刪除 JavaScript 對象的函數，包括 key 和 value。

//實例
var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);

document.getElementById("demo").innerHTML = myJSON;

我們可以在執行 JSON.stringify() 函數前將函數轉換爲字符串來避免以上問題的發生：

//實例
var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};
obj.alexa = obj.alexa.toString();
var myJSON = JSON.stringify(obj);

document.getElementById("demo").innerHTML = myJSON;

注 : 不建議在 JSON 中使用函數

七、JSON 使用

7.1 把 JSON 文本轉換爲 JavaScript 對象

JSON 最常見的用法之一，是從 web 服務器上讀取 JSON 數據（作爲文件或作爲 HttpRequest），將 JSON 數據轉換爲 JavaScript 對象，然後在網頁中使用該數據。

7.2 JSON 實例 - 來自字符串的對象

創建包含 JSON 語法的 JavaScript 字符串：

var txt = '{ "sites" : [' +
'{ "name":"菜鳥教程" , "url":"www.runoob.com" },' +
'{ "name":"google" , "url":"www.google.com" },' +
'{ "name":"微博" , "url":"www.weibo.com" } ]}';

由於 JSON 語法是 JavaScript 語法的子集，JavaScript 函數 eval() 可用於將 JSON 文本轉換爲 JavaScript 對象。

eval() 函數使用的是 JavaScript 編譯器，可解析 JSON 文本，然後生成 JavaScript 對象。必須把文本包圍在括號中，這樣才能避免語法錯誤：

var obj = eval ("(" + txt + ")");

在網頁中使用 JavaScript 對象：

var txt = '{ "sites" : [' +
'{ "name":"菜鳥教程" , "url":"www.runoob.com" },' +
'{ "name":"google" , "url":"www.google.com" },' +
'{ "name":"微博" , "url":"www.weibo.com" } ]}';

var obj = eval ("(" + txt + ")");

document.getElementById("name").innerHTML=obj.sites[0].name ;
document.getElementById("url").innerHTML=obj.sites[0].url;

八、JSONP

Jsonp(JSON with Padding) 是 json 的一種"使用模式"，可以讓網頁從別的域名（網站）那獲取資料，即跨域讀取數據。

爲什麼我們從不同的域（網站）訪問數據需要一個特殊的技術(JSONP )呢？這是因爲同源策略。

同源策略，它是由Netscape提出的一個著名的安全策略，現在所有支持JavaScript 的瀏覽器都會使用這個策略。

8.1 JSONP 應用

服務端JSONP格式數據

如客戶想訪問 : http://www.runoob.com/try/ajax/jsonp.php?jsonp=callbackFunction。

假設客戶期望返回JSON數據：["customername1","customername2"]。

真正返回到客戶端的數據顯示爲: callbackFunction(["customername1","customername2"])。

服務端文件jsonp.php代碼爲：

<?php
header('Content-type: application/json');
//獲取回調函數名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json數據
$json_data = '["customername1","customername2"]';
//輸出jsonp格式的數據
echo $jsoncallback . "(" . $json_data . ")";
?>

客戶端實現 callbackFunction 函數

<script type="text/javascript">
function callbackFunction(result, methodName)
{
  var html = '<ul>';
  for(var i = 0; i < result.length; i++)
  {
      html += '<li>' + result[i] + '</li>';
  }
  html += '</ul>';
  document.getElementById('divCustomers').innerHTML = html;
}
</script>

頁面展示

<div id="divCustomers"></div>

客戶端頁面完整代碼

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 實例</title>
</head>
<body>
    <div id="divCustomers"></div>
    <script type="text/javascript">
function callbackFunction(result, methodName)
        {
            var html = '<ul>';
            for(var i = 0; i < result.length; i++)
            {
               html += '</ul>';
            document.getElementById('divCustomers').innerHTML = html;
        }
</script>
<script type="text/javascript" src="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
</body>
</html>

8.2 jQuery 使用 JSONP

以上代碼可以使用 jQuery 代碼實例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JSONP 實例</title>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>    
</head>
<body>
<div id="divCustomers"></div>
<script>
$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
    var html = '<ul>';
    for(var i = 0; i < data.length; i++)
    {
        html += '<li>' + data[i] + '</li>';
    }
    html += '</ul>';
    
    $('#divCustomers').html(html); 
});
</script>
</body>
</html>

九、PHP JSON

9.1 JSON 函數

函數	描述
json_encode	對變量進行 JSON 編碼
json_decode	對 JSON 格式的字符串進行解碼，轉換爲 PHP 變量
json_last_error	返回最後發生的錯誤

9.2 json_encode

PHP json_encode() 用於對變量進行 JSON 編碼，該函數如果執行成功返回 JSON 數據，否則返回 FALSE 。

語法

string json_encode ( $value [, $options = 0 ] )

參數value: 要編碼的值。該函數只對 UTF-8 編碼的數據有效。options:由以下常量組成的二進制掩碼：JSON_HEX_QUOT, JSON_HEX_TAG, JSON_HEX_AMP,JSON_HEX_APOS,JSON_NUMERIC_CHECK,JSON_PRETTY_PRINT, JSON_UNESCAPED_SLASHES, JSON_FORCE_OBJECT

以下實例演示瞭如何將 PHP 數組轉換爲 JSON 格式數據：

<?php
   $arr = array('a' => 1, 'b' => 2, 'c' => 3, 'd' => 4, 'e' => 5);
   echo json_encode($arr);
?>

以上代碼執行結果爲：

{"a":1,"b":2,"c":3,"d":4,"e":5}

以下實例演示瞭如何將 PHP 對象轉換爲 JSON 格式數據：

<?php
   class Emp {
       public $name = "";
       public $hobbies  = "";
       public $birthdate = "";
   }
 $e = new Emp();
   $e->name = "sachin";
   $e->hobbies  = "sports";
   $e->birthdate = date('m/d/Y h:i:s a', "8/5/1974 12:20:03 p");
   $e->birthdate = date('m/d/Y h:i:s a', strtotime("8/5/1974 12:20:03"));

   echo json_encode($e);
?>

以上代碼執行結果爲：

{"name":"sachin","hobbies":"sports","birthdate":"08\/05\/1974 12:20:03 pm"}

9.3 json_decode

PHP json_decode() 函數用於對 JSON 格式的字符串進行解碼，並轉換爲 PHP 變量。

語法

mixed json_decode ($json_string [,$assoc = false [, $depth = 512 [, $options = 0 ]]])

參數

json_string: 待解碼的 JSON 字符串，必須是 UTF-8 編碼數據
assoc: 當該參數爲 TRUE 時，將返回數組，FALSE 時返回對象。
depth: 整數類型的參數，它指定遞歸深度
options: 二進制掩碼，目前只支持 JSON_BIGINT_AS_STRING 。

實例

以下實例演示瞭如何解碼 JSON 數據：

<?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)
}

JSON詳解

Json詳解

一、 什麼是 JSON?

二、JSON的 語法規則

2.1 JSON 數據 - 一個名稱對應一個值

2.2 JSON 值

2.3 JSON 數字

2.4 JSON 對象

2.5 JSON 數組

2.6 JSON 布爾值

2.7 JSON null

2.8 JSON 使用 JavaScript 語法

2.9 JSON 文件

三、JSON 對象

3.1 對象語法

3.2 訪問對象值

3.3 循環對象

3.4 嵌套 JSON 對象

3.5 修改值

3.6 刪除對象屬性

3.7 json 對象和 json 字符串的區別：

四、JSON 數組

4.1 數組作爲 JSON 對象

4.2 JSON 對象中的數組

4.3 循環數組

4.4 嵌套 JSON 對象中的數組

4.5 修改數組值

4.6 刪除數組元素

五、JSON.parse()

5.1 JSON 解析實例 :

5.2 從服務端接收 JSON 數據

5.3 從服務端接收數組的 JSON 數據

5.4 異常

5.5 解析函數

六、JSON.stringify()

6.1 JavaScript 對象轉換

6.2 JavaScript 數組轉換

6.3 異常

6.4 解析函數

七、JSON 使用

7.1 把 JSON 文本轉換爲 JavaScript 對象

7.2 JSON 實例 - 來自字符串的對象

八、JSONP

8.1 JSONP 應用

8.2 jQuery 使用 JSONP

九、PHP JSON

9.1 JSON 函數

9.2 json_encode

9.3 json_decode

一、什麼是 JSON?

二、JSON的語法規則