HTMLJavascript：如何访问带有 src 集的脚本标记中加载的 JSON 数据

1个回答

黑铁蛋000

2025-06-22 11:45

如何访问带有 src 集的脚本标记中加载的 JSON 数据

在开发网页应用程序时，我们经常需要使用 JavaScript 来获取和处理数据。而这些数据通常以 JSON 格式进行传输。在 HTML 页面中，我们可以通过使用带有 src 属性的脚本标记来加载 JavaScript 文件并执行其中的代码。然而，有时我们需要访问这些脚本标记中加载的 JSON 数据，以便在页面中展示或进一步处理。本文将介绍如何通过 HTML 和 JavaScript 来访问带有 src 集的脚本标记中加载的 JSON 数据，并提供相应的示例代码。

步骤 1：创建 HTML 页面

首先，我们需要创建一个 HTML 页面，并在其中添加一个空的脚本标记，用于加载包含 JSON 数据的 JavaScript 文件。以下是一个简单的示例：

html
<!DOCTYPE html>
<html>
<head>
    <title>访问加载的 JSON 数据</title>
</head>
<body>
    <script src="data.JS"></script>
</body>
</html>

在上述示例中，我们创建了一个名为 "访问加载的 JSON 数据" 的 HTML 页面，并在其中添加了一个空的脚本标记。该脚本标记使用 src 属性指定了要加载的 JavaScript 文件的路径为 "data.JS"。接下来，我们将在 "data.JS" 文件中添加包含 JSON 数据的代码。

步骤 2：在 JavaScript 文件中加载 JSON 数据

在 "data.JS" 文件中，我们可以使用 Ajax 或 Fetch API 来加载外部的 JSON 数据。以下是一个使用 Fetch API 的示例：

Javascript
fetch('data.JSon')
    .then(response => response.JSon())
    .then(data => {
        // 在这里处理 JSON 数据
        console.log(data);
    })
    .catch(error => {
        // 处理加载错误
        console.error(error);
    });

在上述示例中，我们使用 Fetch API 发起一个 GET 请求，加载名为 "data.JSon" 的 JSON 文件。然后，我们使用 response.JSon() 方法将响应转换为 JSON 格式的数据。最后，我们可以在 .then() 方法中访问并处理这些 JSON 数据。在示例中，我们简单地将数据打印到控制台上。

步骤 3：访问加载的 JSON 数据

一旦我们成功加载了 JSON 数据，就可以在 JavaScript 中访问和处理它们了。以下是一个示例，展示如何在 .then() 方法中访问加载的 JSON 数据并在 HTML 页面中展示：

Javascript
fetch('data.JSon')
    .then(response => response.JSon())
    .then(data => {
        // 访问 JSON 数据并展示在页面上
        const contAIner = document.getElementById('data-contAIner');
        contAIner.innerHTML = JSON.stringify(data);
    })
    .catch(error => {
        // 处理加载错误
        console.error(error);
    });

在上述示例中，我们首先获取一个具有 "data-contAIner" id 的 HTML 元素，并将其存储在变量 contAIner 中。然后，我们使用 innerHTML 属性将加载的 JSON 数据转换为字符串并设置为 contAIner 元素的内容。这样，我们就可以在 HTML 页面中展示加载的 JSON 数据了。

通过使用带有 src 属性的脚本标记来加载 JavaScript 文件，我们可以方便地在 HTML 页面中执行 JavaScript 代码。而当这些 JavaScript 代码加载并处理 JSON 数据时，我们可以使用 Fetch API 或其他 Ajax 技术来获取和操作这些数据。本文提供了一个简单的示例，展示了如何访问带有 src 集的脚本标记中加载的 JSON 数据，并在 HTML 页面中展示。希望这对于你在开发网页应用程序时处理 JSON 数据有所帮助！

举报有用（4）分享收藏

HTMLJavascript：如何访问带有 src 集的脚本标记中加载的 JSON 数据

1个回答

黑铁蛋000

热门话题

相关问题