JavaScript JSON

2022-05-18 14:46 更新

JSON 是用于存儲和傳輸數(shù)據(jù)的格式。

JSON 通常用于服務(wù)端向網(wǎng)頁傳遞數(shù)據(jù) 。


什么是 JSON?

  • JSON 英文全稱 JavaScript Object Notation
  • JSON 是一種輕量級的數(shù)據(jù)交換格式。
  • JSON是獨立的語言 *
  • JSON 易于理解。

Note * JSON 使用 JavaScript 語法,但是 JSON 格式僅僅是一個文本。
文本可以被任何編程語言讀取及作為數(shù)據(jù)格式傳遞。

JSON 實例

以下 JSON 語法定義了 employees 對象: 3 條員工記錄(對象)的數(shù)組:

JSON Example

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


JSON 格式化后為 JavaScript 對象

JSON 格式在語法上與創(chuàng)建 JavaScript 對象代碼是相同的。

由于它們很相似,所以 JavaScript 程序可以很容易的將 JSON 數(shù)據(jù)轉(zhuǎn)換為 JavaScript 對象。


JSON 語法規(guī)則

  • 數(shù)據(jù)為 鍵/值 對。
  • 數(shù)據(jù)由逗號分隔。
  • 大括號保存對象
  • 方括號保存數(shù)組

JSON 數(shù)據(jù) - 一個名稱對應(yīng)一個值

JSON 數(shù)據(jù)格式為 鍵/值 對,就像 JavaScript 對象屬性。

鍵/值對包括字段名稱(在雙引號中),后面一個冒號,然后是值:

"firstName":"John"

JSON 對象

JSON 對象保存在大括號內(nèi)。

就像在 JavaScript 中, 對象可以保存多個 鍵/值 對:

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

JSON 數(shù)組

JSON 數(shù)組保存在中括號內(nèi)。

就像在 JavaScript 中, 數(shù)組可以包含對象:

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

在以上實例中,對象 "employees" 是一個數(shù)組。包含了三個對象。

每個為個對象為員工的記錄(姓和名)。


JSON 字符串轉(zhuǎn)換為 JavaScript 對象

通常我們從服務(wù)器中讀取 JSON 數(shù)據(jù),并在網(wǎng)頁中顯示數(shù)據(jù)。

簡單起見,我們網(wǎng)頁中直接設(shè)置 JSON 字符串 (你還可以閱讀我們的 JSON 教程):

首先,創(chuàng)建 JavaScript 字符串,字符串為 JSON 格式的數(shù)據(jù):

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

然后,使用 JavaScript 內(nèi)置函數(shù) JSON.parse() 將字符串轉(zhuǎn)換為 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 教程。


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號