用 JQuery 加载本地 JSON 数据并在 HTML 页面中展示-JavaScript中文网-JavaScript教程资源分享门户

背景

在前端开发中，经常需要从服务器获取数据并将其展示在页面上。然而，在某些情况下，我们可能需要加载本地的 JSON 文件并将其展示在 HTML 页面上。这篇文章将介绍如何使用 JQuery 加载本地 JSON 文件并将其展示在 HTML 页面上。

实现步骤

步骤一：创建 JSON 文件

首先，我们需要创建一个 JSON 文件，用于存储我们要展示的数据。我们可以使用任何文本编辑器创建该文件，并将其保存为 .json 格式。以下是一个简单的示例：

-- -------------------- ---- -------
-
  -
    ------- -------
    ------ ---
    --------- ------
  --
  -
    ------- -------
    ------ ---
    --------- --------
  -
-

在此示例中，我们定义了两个对象，每个对象都包含姓名、年龄和性别属性。

步骤二：加载 JSON 文件

一旦我们有了 JSON 文件，就可以使用 JQuery 的 $.getJSON() 方法来加载它。以下是如何使用 $.getJSON() 方法加载本地 JSON 文件的示例代码：

$(document).ready(function() {
  $.getJSON("data.json", function(data) {
    console.log(data);
  });
});

在此代码中，我们使用了 $.getJSON() 方法来加载名为 data.json 的本地 JSON 文件。一旦加载完成，该方法将调用一个回调函数，并将读取的 JSON 数据作为参数传递给该函数。在此示例中，我们只是将数据打印到控制台中。

步骤三：展示数据

一旦我们成功加载了 JSON 数据，就可以将其展示在 HTML 页面上了。以下是如何使用 JQuery 将 JSON 数据展示在 HTML 页面上的示例代码：

$(document).ready(function() {
  $.getJSON("data.json", function(data) {
    $.each(data, function(key, value) {
      $("ul").append("<li>" + value.name + "</li>");
    });
  });
});

在此代码中，我们使用 $.each() 方法遍历 JSON 数据，并将每个对象的姓名属性添加到一个无序列表中。在这里，我们使用了 JQuery 的 append() 方法来将 HTML 元素添加到页面上。

结论

通过以上步骤，我们可以使用 JQuery 加载本地 JSON 文件并将其展示在 HTML 页面上。虽然本文只是简单介绍了这个过程，但它对于想要学习 JQuery 和处理 JSON 数据的前端开发人员来说还是很有帮助的。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/28112