JSON 使用

時間 2019-11-30

標籤 json 使用欄目 JavaScript 简体版

原文原文鏈接

ylbtech-JSON: JSON 使用

1. 把 JSON 文本轉換爲 JavaScript 對象返回頂部

JSON 最多見的用法之一，是從 web 服務器上讀取 JSON 數據（做爲文件或做爲 HttpRequest），將 JSON 數據轉換爲 JavaScript 對象，而後在網頁中使用該數據。

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

2. JSON 實例 - 來自字符串的對象返回頂部

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

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

因爲 JSON 語法是 JavaScript 語法的子集，JavaScript 函數 eval() 可用於將 JSON 文件轉換爲 JavaScript 對象。html

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

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

在網頁中使用 JavaScript 對象：github

實例web

<p>
        名：<span id="fname"></span><br />
        姓：<span id="lname"></span><br />
 </p>
<script>
    document.getElementById("fname").innerHTML = obj.employees[1].firstName;
    document.getElementById("lname").innerHTML = obj.employees[1].lastName;
</script>

3. 代碼、結果返回頂部

代碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>示例</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>

結果瀏覽器

4. JSON 解析器返回頂部

eval() 函數能夠編譯並執行任何 JavaScript 代碼。這隱藏了一個潛在的安全問題。

使用 JSON 解析器將 JSON 轉換爲 JavaScript 對象是更安全的作法。JSON 解析器只能識別 JSON 文件，而不會編譯腳本，

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

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

Web 瀏覽器支持

Web 軟件支持

Firefox(Mozilla)3.5安全

Internet Explorer 8服務器

Chrome Opera 10 Safari 4函數

jQuery Yahoo UIspa

Prototype Dojocode

ECMAScript 1.5

代碼

<!DOCTYPE html>
<html>
<body>
    <h2>Create Object from JSON String</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 = JSON.parse(txt);

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