HTML：如何访问在带有src属性的script标签中加载的JSON数据

在本文中，我们将介绍如何使用HTML和JavaScript访问在带有src属性的script标签中加载的JSON数据。

阅读更多：HTML 教程

1. 了解JSON数据

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于前后端之间的数据传输。它使用键值对的方式来表示数据，类似于JavaScript中的对象。JSON数据的示例如下所示：

{
  "name": "John",
  "age": 30,
  "city": "New York"
}

2. 使用script标签加载JSON数据

在HTML中，我们可以使用带有src属性的script标签来加载外部的JSON数据文件。示例如下：

<script src="data.json"></script>

在上面的示例中，我们使用了一个名为”data.json”的JSON数据文件，并将其通过script标签加载到HTML文档中。

3. 访问已加载的JSON数据

一旦JSON数据被加载到HTML文档中，我们可以使用JavaScript来访问和操作这些数据。

首先，我们需要在JavaScript代码中获取到包含JSON数据的script标签。可以通过以下方式实现：

var scriptElement = document.querySelector('script[src="data.json"]');

在上面的代码中，我们使用了document.querySelector方法和[src=”data.json”]选择器来获取到对应的script标签。然后，我们将返回的结果存储在scriptElement变量中供之后使用。

接下来，我们可以通过script标签的textContent属性获取到已加载的JSON数据的字符串表示形式：

var jsonDataString = scriptElement.textContent;

现在，我们已经获取到了JSON数据的字符串表示形式，接下来可以将其转换为JavaScript对象，以便我们可以更方便地访问和操作数据。可以使用JSON.parse方法将字符串转换为对象：

var jsonData = JSON.parse(jsonDataString);

现在，我们可以通过jsonData对象来访问和操作JSON数据的各个属性。例如，我们可以获取name属性的值：

var name = jsonData.name;
console.log(name); // 输出：John

我们也可以修改JSON数据的某个属性的值。例如，我们将age属性的值增加10：

jsonData.age += 10;
console.log(jsonData.age); // 输出：40

4. 示例说明

为了更好地理解如何访问在带有src属性的script标签中加载的JSON数据，我们来看一个完整的示例。

假设我们有一个名为”data.json”的JSON数据文件，内容如下：

{
  "name": "Alice",
  "age": 25,
  "city": "London"
}

我们可以在HTML中使用以下代码来加载并访问这个JSON数据：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Access JSON Data Loaded in Script Tag</title>
</head>
<body>
  <script src="data.json"></script>
  <script>
    var scriptElement = document.querySelector('script[src="data.json"]');
    var jsonDataString = scriptElement.textContent;
    var jsonData = JSON.parse(jsonDataString);

    var name = jsonData.name;
    var age = jsonData.age;
    var city = jsonData.city;

    console.log("Name: " + name);
    console.log("Age: " + age);
    console.log("City: " + city);
  </script>
</body>
</html>

在上面的示例中，我们首先使用script标签加载”data.json”文件。然后，我们通过JavaScript代码获取到该script标签，并将其内容转换为JSON对象。最后，我们使用console.log方法将name、age和city属性的值输出到浏览器的控制台。

当我们在浏览器中打开该HTML文件时，可以在控制台中看到输出的结果：