JSON編程的parse() 方法

JSON 通常用於與服務端交換數據。

在接收伺服器數據時一般是字元串。

我們可以使用 JSON.parse() 方法將數據轉換為 JavaScript 對象。

語法

JSON.parse(text[, reviver])

參數說明：

• text:必需， 一個有效的 JSON 字元串。

• reviver: 可選，一個轉換結果的函數， 將為對象的每個成員調用此函數。

JSON 解析實例

例如我們從伺服器接收了以下數據：

{"name":"runoob", "alexa":10000, "site":"www.runoob.com"}

我們使用 JSON.parse() 方法處理以上數據，將其轉換為 JavaScript 對象：

varobj = JSON.parse("{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }");

解析前要確保你的數據是標準的 JSON 格式，否則會解析出錯。

你可以使用我們的在線工具檢測：https://c.runoob.com/front-end/53。

解析完成後，我們就可以在網頁上使用 JSON 數據了：

實例

<pid="demo"></p><script>var obj = JSON.parse("{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }");
document.getElementById("demo").innerHTML = obj.name + "：" + obj.site;</script>

從服務端接收 JSON 數據

我們可以使用 AJAX 從伺服器請求 JSON 數據，並解析為 JavaScript 對象。

實例

varxmlhttp = newXMLHttpRequest();xmlhttp.onreadystatechange = function(){if(this.readyState == 4 && this.status == 200){myObj = JSON.parse(this.responseText); document.getElementById("demo").innerHTML = myObj.name; }};xmlhttp.open("GET", "/try/ajax/json_demo.txt", true);xmlhttp.send();

嘗試一下 ?

查看服務端數據： json_demo.txt

從服務端接收數組的 JSON 數據

如果從服務端接收的是數組的 JSON 數據，則 JSON.parse 會將其轉換為 JavaScript 數組：

實例

varxmlhttp = newXMLHttpRequest();xmlhttp.onreadystatechange = function(){if(this.readyState == 4 && this.status == 200){myArr = JSON.parse(this.responseText); document.getElementById("demo").innerHTML = myArr[1]; }};xmlhttp.open("GET", "/try/ajax/json_demo_array.txt", true);xmlhttp.send();

嘗試一下 ?

查看服務端數據： json_demo_array.txt

異常

解析數據

JSON 不能存儲 Date 對象。

如果你需要存儲 Date 對象，需要將其轉換為字元串。

之後再將字元串轉換為 Date 對象。

實例

vartext = "{ "name":"Run", "initDate":"2013-12-14", "site":"www.run.com"}";varobj = JSON.parse(text);obj.initDate = newDate(obj.initDate);
document.getElementById("demo").innerHTML = obj.name + "創建日期: " + obj.initDate;

嘗試一下 ?

我們可以啟用 JSON.parse 的第二個參數 reviver，一個轉換結果的函數，對象的每個成員調用此函數。

實例

vartext = "{ "name":"Run", "initDate":"2013-12-14", "site":"www.run.com"}";varobj = JSON.parse(text, function(key, value){if(key == "initDate"){returnnewDate(value); }else{returnvalue;}});
document.getElementById("demo").innerHTML = obj.name + "創建日期：" + obj.initDate;

嘗試一下 ?

解析函數

JSON 不允許包含函數，但你可以將函數作為字元串存儲，之後再將字元串轉換為函數。

實例

vartext = "{ "name":"Run", "alexa":"function () {return 10000;}", "site":"www.run.com"}";varobj = JSON.parse(text);obj.alexa = eval("(" + obj.alexa + ")");
document.getElementById("demo").innerHTML = obj.name + " Alexa 排名：" + obj.alexa();

嘗試一下 ?

不建議在 JSON 中使用函數。

瀏覽器支持

主流瀏覽器都支持 JSON.parse() 函數：

• Firefox 3.5

• Internet Explorer 8

• Chrome

• Opera 10

• Safari 4

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！