JSON 使用

把JSON 文字轉換為JavaScript 物件

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

為了更簡單地為您講解，我們使用字串作為輸入進行演示（而不是文件）。

JSON 實例- 來自字串的物件

建立包含JSON 語法的JavaScript 字串：

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

由於JSON 語法是JavaScript 語法的子集，JavaScript 函數eval()可用於將JSON 文字轉換為JavaScript 物件。

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

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

在網頁中使用JavaScript 物件：

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h2>从 JSON 字符串中创建对象</h2>
<p>
名: <span id="fname"></span><br> 
姓: <span id="lname"></span><br> 
</p> 
<script>
var txt = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';

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

document.getElementById("fname").innerHTML=obj.employees[1].firstName 
document.getElementById("lname").innerHTML=obj.employees[1].lastName 
</script>
</body>
</html>

執行實例»

點擊"執行實例" 按鈕查看線上實例

JSON 解析器

lamp # eval() 函數可編譯並執行任何JavaScript 程式碼。這隱藏了一個潛在的安全問題。

使用 JSON 解析器將 JSON 轉換為 JavaScript 物件是更安全的做法。 JSON 解析器只能辨識 JSON 文本，而不會編譯腳本。

在瀏覽器中，這提供了原生的 JSON 支持，而且 JSON 解析器的速度更快。

較新的瀏覽器和最新的 ECMAScript (JavaScript) 標準中都包含了原生的對 JSON 的支援。

實例

<!DOCTYPE html>
<html>
<body>
<h2>Create Object from JSON String</h2>
<p>
First Name: <span id="fname"></span><br> 
Last Name: <span id="lname"></span><br> 
</p> 
<script>
var txt = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';

obj = JSON.parse(txt);

document.getElementById("fname").innerHTML=obj.employees[1].firstName 
document.getElementById("lname").innerHTML=obj.employees[1].lastName 
</script>
</body>
</html>

#執行實例»

#點擊"運行實例" 按鈕查看線上實例

對於較舊的瀏覽器，可使用JavaScript 函式庫：https://github.com/douglascrockford/JSON-js

JSON 格式最初是originally specified by Douglas Crockford

← JSON 語法

JSONP 教程 →

提交