jQuery ajax读取本地json文件的实例

下面是详细讲解“jQuery ajax读取本地json文件的实例”的完整攻略。

1. 准备工作

在开始之前，需要准备以下三个文件：

json文件，用于存放数据，这里我们以data.json为例；
html文件，用于展示数据，这里我们以index.html为例；
js文件，用于编写JavaScript代码，这里我们以app.js为例。

2. 创建json数据

首先我们需要创建一个json格式的数据，这里以数组形式示例：

[
    {
        "name": "张三",
        "age": 18,
        "gender": "男"
    },
    {
        "name": "李四",
        "age": 22,
        "gender": "女"
    },
    {
        "name": "王五",
        "age": 29,
        "gender": "男"
    }
]

将上述json数据保存为data.json文件，并将其放置在项目根目录下。

3. 创建html文件

创建一个index.html文件，并添加以下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Ajax读取本地json文件的实例</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./app.js"></script>
  </body>
</html>

其中<title>标签用于设置页面标题，<div>标签用于展示数据，<script>标签用于加载app.js文件，这些都是基础的HTML元素，就不再做过多的介绍。

4. 创建js文件并编写代码

接下来，我们需要在app.js文件中编写JavaScript代码，用于读取本地json文件中的数据，并将其展示在页面上。

首先，我们需要使用jQuery中的$.ajax方法读取data.json文件中的数据。具体实现如下：

$.ajax({
    url: 'data.json', // json文件的路径
    type: 'GET', // 请求的方式
    dataType: 'json', // 响应的数据格式
    success: function(data) { // 成功回调函数
        console.log(data); // 在控制台输出读取到的数据
    },
    error: function(xhr, status, error) { // 失败回调函数
        console.error(xhr, status, error);
    }
});

这里的url参数代表json文件的路径，type参数代表请求方式，dataType参数代表响应的数据格式，success和error参数分别代表成功和失败的回调函数。当jquery成功加载到本地json文件时，console应该打印出读取到的数据。

下面，我们考虑将读取到的数据输出到页面上。我们可以使用jQuery的$.each方法遍历数据，并将其插入到<div>标签中。具体实现如下：

$.ajax({
    url: 'data.json', // json文件的路径
    type: 'GET', // 请求的方式
    dataType: 'json', // 响应的数据格式
    success: function(data) { // 成功回调函数
        var app = $('#app');
        $.each(data, function(index, item) { // 遍历数据
            var name = item.name;
            var age = item.age;
            var gender = item.gender; // 分别获取数据项
            app.append('<p>' + name + '，' + age + '岁，' + gender + '。</p>'); // 插入到<div>标签中
        });
    },
    error: function(xhr, status, error) { // 失败回调函数
        console.error(xhr, status, error);
    }
});

这里，我们定义了一个名为app的<div>标签，并使用$.each方法遍历获取到的数据，在循环体中获取每一项数据，并将其插入到<div>标签中。

5. 运行示例

到此为止，我们已经完成了读取本地json文件的代码编写。打开index.html文件，控制台应该输出读取到的数据，并且数据也已经成功地展示在了页面上。

<!DOCTYPE html>
<html>
  <head>
    <title>Ajax读取本地json文件的实例</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./jquery-3.6.0.min.js"></script>
    <script src="./app.js"></script>
  </body>
</html>

如上所示，我们需要在<body>标签中添加<div>标签以展示数据，同时还需引入jQuery文件和我们编写的app.js文件。

6. 总结

通过以上示例，我们学习了如何使用jQuery读取本地json文件，并将其数据展示在页面上。需要注意的是，由于涉及到跨域问题，ajax读取本地json文件时需要通过http协议进行，也就是需要在服务端启动web服务，通过服务端的方式来读取本地json文件。

另外，以上示例代码中只是简单地将获取到的数据输出到页面上，实际项目中还需要对获取到的数据进行处理、过滤等操作，从而更好地满足项目的需求。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery ajax读取本地json文件的实例 - Python技术站