在前端开发中，我们经常需要从页面中获取数据。而有时候，这些数据可能会以JSON格式存储在HTML文档中的脚本标记内。那么如何通过JavaScript来读取这些数据呢？本文将为您介绍详细的步骤和示例代码。
步骤
- 获取脚本标记
首先，我们需要通过DOM API获取包含JSON数据的脚本标记。可以使用document.getElementsByTagName()方法获取所有脚本标记，再根据其type属性值是否为"application/json"来确定包含JSON数据的脚本标记。
----- ------- - ---------------------------------------
--- ----------
--- ---- - - -- - - --------------- ---- -
-- ---------------- --- ------------------- -
---------- - ----------
-----
-
-- 读取JSON数据
接下来，我们可以通过获取到的脚本标记的innerHTML属性来获取其中的JSON数据。由于innerHTML返回的是字符串类型，我们需要使用JSON.parse()方法将其转换成JSON对象。
----- -------- - --------------------------------
- 使用JSON数据
现在我们已经成功地将JSON数据存储在了jsonData变量中，可以随意使用它。以下是一个简单的示例，将JSON数据渲染到页面上。
----- ------ - ------------------------------- ----- ----- - ------------------------------ ----- -------- - --------------------------------- ---------------- - ------------- --------------- - ------------ ------------------ - ---------------
示例代码
HTML文档中的脚本标记：
------- ----------------------- ---------- - ------- ----- ------ --- --------- --- - ---------
JavaScript代码：
----- ------- - ---------------------------------------
--- ----------
--- ---- - - -- - - --------------- ---- -
-- ---------------- --- ------------------- -
---------- - ----------
-----
-
-
----- -------- - --------------------------------
----- ------ - -------------------------------
----- ----- - ------------------------------
----- -------- - ---------------------------------
---------------- - -------------
--------------- - ------------
------------------ - ---------------总结
通过以上步骤，我们可以轻松地从JavaScript中读取脚本标记中的JSON数据，并使用它进行页面渲染等操作。希望通过本文，您可以更好地理解如何在前端开发中处理JSON数据。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/14290