博客

如何使用jQuery从JSON文件中获取数据并显示在HTML表格中

  • Post category:jquery

要使用jQuery从JSON文件中获取数据并显示在HTML表格中，需要按照以下步骤进行：

准备工作

  1. 在HTML页面中引入jQuery库：
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  1. 创建一个表格，并在表格中设置表头：
<table id="data-table">
  <thead>
    <tr>
      <th>列名1</th>
      <th>列名2</th>
      <th>列名3</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>
  1. 创建一个JSON文件，并将数据存储在其中。例如，我们可以创建一个data.json文件，其中包含以下数据：
[
  {
    "列名1": "数据1",
    "列名2": "数据2",
    "列名3": "数据3"
  },
  {
    "列名1": "数据4",
    "列名2": "数据5",
    "列名3": "数据6"
  }
]

从JSON文件中获取数据并显示在表格中

  1. 使用jQuery的ajax方法从JSON文件中获取数据：
$.ajax({
  url: "data.json",
  dataType: "json",
  success: function(data) {
    console.log(data);
  }
});
  1. 在ajax请求的回调函数中，使用jQuery的each方法遍历数据，并将每个对象的值插入到表格中的一行中：
$.ajax({
  url: "data.json",
  dataType: "json",
  success: function(data) {
    console.log(data);
    $.each(data, function(index, item) {
      var tr = $("<tr>");
      tr.append("<td>" + item.列名1 + "</td>");
      tr.append("<td>" + item.列名2 + "</td>");
      tr.append("<td>" + item.列名3 + "</td>");
      $("#data-table tbody").append(tr);
    });
  }
});

示例一：

以下是一个完整的示例，演示如何从JSON文件中获取数据并将数据显示在HTML表格中：

index.html文件内容：

<!DOCTYPE html>
<html>
<head>
  <title>从JSON文件中获取数据并显示在表格中</title>
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <table id="data-table">
    <thead>
      <tr>
        <th>列名1</th>
        <th>列名2</th>
        <th>列名3</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
  <script>
    $.ajax({
      url: "data.json",
      dataType: "json",
      success: function(data) {
        console.log(data);
        $.each(data, function(index, item) {
          var tr = $("<tr>");
          tr.append("<td>" + item.列名1 + "</td>");
          tr.append("<td>" + item.列名2 + "</td>");
          tr.append("<td>" + item.列名3 + "</td>");
          $("#data-table tbody").append(tr);
        });
      }
    });
  </script>
</body>
</html>

data.json文件内容：

[
  {
    "列名1": "数据1",
    "列名2": "数据2",
    "列名3": "数据3"
  },
  {
    "列名1": "数据4",
    "列名2": "数据5",
    "列名3": "数据6"
  }
]

打开index.html文件，就可以看到数据已经成功地显示在表格中了。

示例二：

下面的示例演示如何从一个API接口获取数据并将数据显示在HTML表格中。本例使用的是Random User API，这个API可以随机生成用户信息。

index.html文件内容：

<!DOCTYPE html>
<html>
<head>
  <title>从API中获取数据并显示在表格中</title>
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <table id="data-table">
    <thead>
      <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>邮箱</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
  <script>
    $.ajax({
      url: "https://randomuser.me/api/?results=10",
      dataType: "json",
      success: function(data) {
        console.log(data);
        $.each(data.results, function(index, item) {
          var tr = $("<tr>");
          tr.append("<td>" + item.name.first + " " + item.name.last + "</td>");
          tr.append("<td>" + item.gender + "</td>");
          tr.append("<td>" + item.email + "</td>");
          $("#data-table tbody").append(tr);
        });
      }
    });
  </script>
</body>
</html>

打开index.html文件，就可以看到随机生成的10个用户的姓名、性别和邮箱已经成功地显示在表格中了。

Tags: