json怎么放在html中

在网页开发过程中，JSON（JavaScript Object Notation）和HTML（HyperText Markup Language）是两种常用的数据格式和标记语言，JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成，HTML则是用来构建网页结构的标准标记语言，将JSON数据嵌入到HTML中，可以让网页根据数据动态展示内容，提高用户体验，本文将详细介绍如何在HTML中使用JSON数据。

我们需要了解JSON数据的基本结构，JSON数据由键值对组成，类似于JavaScript对象。

{
  "name": "张三",
  "age": 25,
  "hobbies": ["篮球", "旅行", "听音乐"]
}

这个JSON对象包含了一个人的基本信息，如姓名、年龄和爱好，接下来，我们将学习如何在HTML中使用这些数据。

1、使用JavaScript获取JSON数据

在HTML页面中，我们可以通过JavaScript来获取JSON数据，这通常通过AJAX（Asynchronous JavaScript and XML）技术实现，AJAX允许我们在不刷新页面的情况下与服务器进行数据交互，常用的AJAX库有jQuery、axios等，下面是一个使用jQuery获取JSON数据的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JSON in HTML</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="user-info"></div>
  <script>
    $(document).ready(function() {
      $.ajax({
        url: 'user.json',
        dataType: 'json',
        success: function(data) {
          displayUserInfo(data);
        },
        error: function(error) {
          console.log('Error:', error);
        }
      });
    });
    function displayUserInfo(user) {
      const userInfo = $('#user-info');
      userInfo.append('<h1>姓名: ' + user.name + '</h1>');
      userInfo.append('<p>年龄: ' + user.age + '</p>');
      userInfo.append('<h2>爱好:</h2>');
      user.hobbies.forEach(hobby => {
        userInfo.append('<p>' + hobby + '</p>');
      });
    }
  </script>
</body>
</html>

在这个示例中，我们首先引入了jQuery库，然后在页面加载完成后通过AJAX请求获取名为user.json的JSON文件，当请求成功时，我们调用displayUserInfo函数将数据展示在页面上。

2、使用服务器端模板引擎

除了在客户端使用JavaScript获取JSON数据外，我们还可以在服务器端通过模板引擎将JSON数据嵌入到HTML中，常用的服务器端模板引擎有Handlebars、EJS、Jinja2等，下面是一个使用EJS模板引擎的示例：

创建一个名为user.json的JSON文件，内容如下：

{
  "name": "李四",
  "age": 28,
  "hobbies": ["游泳", "摄影", "看电影"]
}

创建一个名为user.ejs的EJS模板文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>User Info</title>
</head>
<body>
  <div id="user-info">
    <h1>姓名: <%= user.name %></h1>
    <p>年龄: <%= user.age %></p>
    <h2>爱好:</h2>
    <% user.hobbies.forEach(function(hobby) { %>
      <p><%= hobby %></p>
    <% }); %>
  </div>
</body>
</html>

在这个模板中，我们使用EJS语法将JSON数据嵌入到HTML中。<%= user.name %>表示将user对象的name属性值插入到HTML中。

在服务器端使用EJS模板引擎解析user.ejs文件，并将其与user.json数据结合，生成最终的HTML页面。

通过以上两种方法，我们可以轻松地将JSON数据嵌入到HTML中，实现动态展示内容，这不仅可以提高用户体验，还可以让我们的网页更加灵活和强大。

谷歌浏览器

谷歌浏览器

谷歌浏览器