JSON 在線解析演示

Cloud computing and code 2023年05月25日 20:13 1.2K+ visitor

JSON（JavaScript Object Notation）是一種輕巧的數據交換格式，被廣泛應用於 Web 應用程序的數據交換和存儲。它是一種用於存儲和傳輸結構化數據的語言，其語法簡單，易於讀寫和理解，同時還提供了豐富的數據類型和結構組織方式。

JSON 在線解析演示第1张

為了方便用戶解析和查看 JSON 數據，以下是JSON 在線解析一個簡單的 JSON 在線解析器示例：

1. 輸入 JSON 數據

在本文 JSON 數據源演示器，復制下面這段代碼：

{
  "name": "John Doe",
  "age": 30,
  "email": "[email protected]",
  "hobbies": [
    "reading",
    "traveling",
    "photography"
  ]
}

2. 解析 JSON 數據

將 JSON 數據輸入到解析器中，解析器將會將其解析為一個樹形結構。根據上述示例，解析器將生成以下結構：

{
  "name": "John Doe",
  "age": 30,
  "email": "[email protected]",
  "hobbies": [
    "reading",
    "traveling",
    "photography"
  ]
}

3. 瀏覽 JSON 數據

解析器將 JSON 數據解析為樹形結構後，您可以輕松地查詢並獲取其中的數據。例如，您可以獲取 "name"、"age"、"email" 和 "hobbies" 的值，並查看它們的類型和數據格式。

4. 格式化 JSON 數據

解析器還提供了格式化 JSON 數據的功能，這使得數據更容易閱讀。例如，您可以使用格式化後的 JSON 數據將其放在網站上，使其易於查看和閱讀。如下所示：

{
  "name": "John Doe",
  "age": 30,
  "email": "[email protected]",
  "hobbies": [
    "reading",
    "traveling",
    "photography"
  ]
}

通過在線 JSON 解析器，用戶可以輕松地解析、查看和格式化 JSON 數據。這使得 JSON 數據交換更加容易和簡單，同時也為 Web 應用程序提供了極大的靈活性和數據處理能力。

以下是一個HTML頁面，演示如何使用JavaScript實現JSON在線解析的功能：

<!DOCTYPE html>
<html>
  <head>
    <title>JSON Online Parser</title>
    <meta charset="UTF-8">
    <script src="https://dm.qunapu.com/jquery/jquery.min.js"></script>
    <script>
      function parseJSON() {
        var json = $("#json-input").val(); // 獲取文本框中的json數據
        try {
          var obj = JSON.parse(json); // 解析json數據
          var pretty = JSON.stringify(obj, null, 4); // 格式化json數據
          $("#json-output").val(pretty); // 將格式化後的json數據輸出到文本框中
        } catch (e) {
          alert("Invalid JSON data!"); // 處理異常情況
        }
      }
    </script>
  </head>
  <body>
    <h1>JSON Online Parser</h1>
    <p>Paste your JSON data below:</p>
    <textarea id="json-input" cols="80" rows="10"></textarea>
    <br><br>
    <button onclick="parseJSON()">Parse JSON</button>
    <br><br>
    <p>Result:</p>
    <textarea id="json-output" cols="80" rows="10" readonly></textarea>
  </body>
</html>

代碼解釋：

- `<!DOCTYPE html>`：聲明 HTML 文檔類型。

- `<html>`：HTML 頁面的根元素。

- `<head>`：HTML 文檔的頭部，用於定義頁面的元信息和引入相關資源。

- `<title>`：頁面的標題，顯示在瀏覽器的標簽欄中。

- `<meta charset="UTF-8">`：聲明文檔使用 UTF-8 字符編碼。

- `<script>`：定義 JavaScript 腳本的標簽。

- `src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"`：引入 jQuery 庫。

- `function parseJSON()`：定義一個名為 `parseJSON` 的 JavaScript 函數。

- `$("#json-input").val();`：使用 jQuery 獲取 id 為 `json-input` 的文本框中的值。

- `var obj = JSON.parse(json);`：使用內置的 `JSON.parse()` 方法解析 JSON 數據。

- `var pretty = JSON.stringify(obj, null, 4);`：使用內置的 `JSON.stringify()` 方法將解析出的對象格式化為可讀性更好的 JSON 字符串。