javascript json

json 是存儲(chǔ)和傳輸數(shù)據(jù)的格式。

json 經(jīng)常在數(shù)據(jù)從服務(wù)器發(fā)送到網(wǎng)頁(yè)時(shí)使用。

1. 什么是 json？

• json 指的是 javascript object notation
• json 是輕量級(jí)的數(shù)據(jù)交換格式
• json 獨(dú)立于語(yǔ)言
• json 是“自描述的”且易于理解

2. json 范例

json 語(yǔ)法定義了一個(gè)雇員對(duì)象：包含三條員工記錄的數(shù)組（對(duì)象）：

json 范例

{
"employees":[
    {"firstname":"bill", "lastname":"gates"}, 
    {"firstname":"steve", "lastname":"jobs"},
    {"firstname":"alan", "lastname":"turing"}
]
}

3. json 格式評(píng)估為 javascript 對(duì)象

json 格式在語(yǔ)法上與創(chuàng)建 javascript 對(duì)象的代碼相同。

由于這種相似性，javascript 程序可以很容易地將 json 數(shù)據(jù)轉(zhuǎn)換成本地的 javascript 對(duì)象。

4. json 語(yǔ)法規(guī)則

• 數(shù)據(jù)是名稱/值對(duì)
• 數(shù)據(jù)由逗號(hào)分隔
• 花括號(hào)保存對(duì)象
• 方括號(hào)保存數(shù)組

5. json 數(shù)據(jù) - 名稱和值

json 數(shù)據(jù)的書寫方式是名稱/值對(duì)，類似 javascript 對(duì)象屬性。

名稱/值對(duì)由（雙引號(hào)中的）字段名構(gòu)成，其后是冒號(hào)，再其后是值：

"firstname":"bill"

json 名稱需要雙引號(hào)。javascript 名稱不需要。

6. json 對(duì)象

json 對(duì)象是在花括號(hào)內(nèi)書寫的。

類似 javascript，對(duì)象能夠包含多個(gè)名稱/值對(duì)：

{"firstname":"bill", "lastname":"gates"} 

7. json 數(shù)組

json 數(shù)組在方括號(hào)中書寫。

類似 javascript，數(shù)組能夠包含對(duì)象：

"employees":[
    {"firstname":"bill", "lastname":"gates"}, 
    {"firstname":"steve", "lastname":"jobs"}, 
    {"firstname":"alan", "lastname":"turing"}
]

在上面的例子中，對(duì)象 "employees" 是一個(gè)數(shù)組。它包含了三個(gè)對(duì)象。

每個(gè)對(duì)象代表一個(gè)人的一條記錄（帶有名和姓）。

8. 把 json 文本轉(zhuǎn)換為 javascript 對(duì)象

json 的通常用法是從 web 服務(wù)器讀取數(shù)據(jù)，然后在網(wǎng)頁(yè)中顯示數(shù)據(jù)。

為了簡(jiǎn)單起見(jiàn)，可以使用字符串作為輸入演示。

首先，創(chuàng)建包含 json 語(yǔ)法的 javascript 字符串：

var text = '{ "employees" : [' +
'{ "firstname":"bill" , "lastname":"gates" },' +
'{ "firstname":"steve" , "lastname":"jobs" },' +
'{ "firstname":"alan" , "lastname":"turing" } ]}';

然后，使用 javascript 的內(nèi)建函數(shù) json.parse() 來(lái)把這個(gè)字符串轉(zhuǎn)換為 javascript 對(duì)象：

var obj = json.parse(text);

最后，請(qǐng)?jiān)谀捻?yè)面中使用這個(gè)新的 javascript 對(duì)象：

范例

<p id="demo"></p>
<script>
document.getelementbyid("demo").innerhtml =
obj.employees[1].firstname + " " + obj.employees[1].lastname;
</script>