最新的Web開發教程
 

JavaScript JSON


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

當數據從一個服務器發送到網頁的JSON經常被使用。


什麼是JSON?

  • JSON代表JavaScript對象符號
  • JSON是輕量級的數據交換格式
  • JSON是獨立的語言*
  • JSON是“自我描述”,容易理解

*該JSON語法是由JavaScript對象符號語法派生,但JSON格式只是文本內容。 讀取以及生成JSON數據的代碼可以寫在任何編程語言。


JSON實例

這JSON語法定義了一個對象的員工:3員工記錄(對象)數組:

JSON實例

{
"employees":[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]
}

JSON格式結果為JavaScript對象

JSON格式在語法上是相同的代碼創建JavaScript對象。

由於這種相似性,一個JavaScript程序可以JSON數據很容易地轉換成原生的JavaScript對象。


JSON語法規則

  • 數據以名稱/值對
  • 數據由逗號分隔
  • 大括號持有的對象
  • 方括號持有數組

JSON數據 - 一個名字和一個值

JSON數據被寫入作為名稱/值對,就像JavaScript對象的屬性。

一個名稱/值對由字段名稱(在雙引號),後跟一個冒號,然後是值的:

"firstName":"John"

JSON名稱使用雙引號。 JavaScript的名字沒有。


JSON對象

JSON對象寫入花括號內。

就像在JavaScript中,對象可以包含多個名稱/值對:

{"firstName":"John", "lastName":"Doe"}

JSON陣列

JSON陣列都寫在方括號內。

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

"employees":[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]

在上面的例子中,對象"employees"是一個數組。 它包含三個對象。

每個對象是一個人的記錄(具有第一名字和姓氏)。


轉換一個JSON文本為JavaScript對象

JSON的一個常見的用途是在網頁中從Web服務器讀取數據,並顯示數據。

為簡單起見,這可以用一個字符串作為輸入(或閱讀我們展示了JSON教程 ):

首先,創建一個包含JSON語法的一個JavaScript字符串:

var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

然後,使用JavaScript的內置函數JSON.parse()將字符串轉換成JavaScript對象:

var obj = JSON.parse(text);

最後,使用新的JavaScript對象在你的頁面:

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>
試一試»

您可以在我們閱讀更多關於JSON JSON教程