JavaScript JSON
JSON 是用於儲存和傳輸資料的格式。
JSON 通常用於服務端向網頁傳遞資料 。
什麼是 JSON?
- JSON 英文全稱 JavaScript Object Notation
- JSON 是一種輕量級的資料交換格式。
- JSON是獨立的語言 *
- JSON 易於理解。
 |
* JSON 使用 JavaScript 語法，但是 JSON 格式僅僅是一個文字。 文字可以被任何程式語言讀取及作為資料格式傳遞。 |
|---|
JSON 例項
以下 JSON 語法定義了 sites 物件: 3 條網站資訊（物件）的陣列:
JSON 例項
{"sites":[
{"name":"itread01", "url":"www.itread01.com"},
{"name":"Google", "url":"www.google.com"},
{"name":"Taobao", "url":"www.taobao.com"}
]}
JSON 格式化後為 JavaScript 物件
JSON 格式在語法上與建立 JavaScript 物件程式碼是相同的。
由於它們很相似，所以 JavaScript 程式可以很容易的將 JSON 資料轉換為 JavaScript 物件。
JSON 語法規則
- 資料為 鍵/值 對。
- 資料由逗號分隔。
- 大括號儲存物件
- 方括號儲存陣列
JSON 資料 - 一個名稱對應一個值
JSON 資料格式為 鍵/值 對，就像 JavaScript 物件屬性。
鍵/值對包括欄位名稱（在雙引號中），後面一個冒號，然後是值：
"name":"itread01"
JSON 物件
JSON 物件儲存在大括號內。
就像在 JavaScript 中, 物件可以儲存多個 鍵/值 對：
{"name":"itread01", "url":"www.itread01.com"}
JSON 陣列
JSON 陣列儲存在中括號內。
就像在 JavaScript 中, 陣列可以包含物件：
"sites":[
{"name":"itread01", "url":"www.itread01.com"},
{"name":"Google", "url":"www.google.com"},
{"name":"Taobao", "url":"www.taobao.com"}
]
在以上例項中，物件 "sites" 是一個數組，包含了三個物件。
每個物件為站點的資訊（網站名和網站地址）。
JSON 字串轉換為 JavaScript 物件
通常我們從伺服器中讀取 JSON 資料，並在網頁中顯示資料。
簡單起見，我們網頁中直接設定 JSON 字串 (你還可以閱讀我們的 JSON 教程):
首先，建立 JavaScript 字串，字串為 JSON 格式的資料：
var text = '{ "sites" : [' +
'{ "name":"itread01" , "url":"www.itread01.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
然後，使用 JavaScript 內建函式 JSON.parse() 將字串轉換為 JavaScript 物件:
var obj = JSON.parse(text);
最後，在你的頁面中使用新的 JavaScript 物件：
例項
var text = '{ "sites" : [' +
'{ "name":"itread01" , "url":"www.itread01.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
嘗試一下 ?
相關函式
| 函式 | 描述 |
|---|---|
| JSON.parse() | 用於將一個 JSON 字串轉換為 JavaScript 物件。 |
| JSON.stringify() | 用於將 JavaScript 值轉換為 JSON 字串。 |
更多 JSON 資訊，你可以閱讀我們的 JSON 教程。