JSON 在線解析演示
JSON（JavaScript Object Notation）是一種輕巧的數據交換格式，被廣泛應用於 Web 應用程序的數據交換和存儲。它是一種用於存儲和傳輸結構化數據的語言，其語法簡單，易於讀寫和理解，同時還提供了豐富的數據類型和結構組織方式。
為了方便用戶解析和查看 JSON 數據，以下是JSON 在線解析一個簡單的 JSON 在線解析器示例：
1. 輸入 JSON 數據
在本文 JSON 數據源演示器，復制下面這段代碼：
{
"name": "John Doe",
"age": 30,
"email": "johndoe@example.com",
"hobbies": [
"reading",
"traveling",
"photography"
]
}2. 解析 JSON 數據
將 JSON 數據輸入到解析器中，解析器將會將其解析為一個樹形結構。根據上述示例，解析器將生成以下結構：
{
"name": "John Doe",
"age": 30,
"email": "johndoe@example.com",
"hobbies": [
"reading",
"traveling",
"photography"
]
}3. 瀏覽 JSON 數據
解析器將 JSON 數據解析為樹形結構後，您可以輕松地查詢並獲取其中的數據。例如，您可以獲取 "name"、"age"、"email" 和 "hobbies" 的值，並查看它們的類型和數據格式。
4. 格式化 JSON 數據
解析器還提供了格式化 JSON 數據的功能，這使得數據更容易閱讀。例如，您可以使用格式化後的 JSON 數據將其放在網站上，使其易於查看和閱讀。如下所示：
{
"name": "John Doe",
"age": 30,
"email": "johndoe@example.com",
"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 字符串。
- `$("#json-output").val(pretty);`：使用 jQuery 將格式化後的 JSON 數據輸出到 id 為 `json-output` 的文本框中。
- `catch (e) { alert("Invalid JSON data!"); }`：異常處理，如果解析出錯則彈出警告框。
這個HTML頁面實現了一個簡單的JSON在線解析器，可以根據用戶輸入的JSON數據，動態地將其解析為一個結構化對象，並自動格式化。用戶只需將其JSON數據復制粘貼到文本框中，然後點擊“Parse JSON”按鈕即可進行解析並輸出結果。
效果截圖如下：
