js中怎么获取本地json数据

在JavaScript中，获取本地JSON数据是前端开发中常见的需求，本文将详细介绍如何使用JavaScript读取本地JSON文件，并提供相应的示例代码，让我们一起来看看吧！

js中怎么获取本地json数据

使用Ajax请求获取本地JSON数据

在JavaScript中，我们可以使用Ajax技术来请求本地JSON文件，这里以使用jQuery的Ajax方法为例，为大家展示如何读取本地JSON数据。

js中怎么获取本地json数据

1、准备JSON文件

我们需要准备一个JSON文件，创建一个名为data.json的文件，内容如下：

{
  "name": "张三",
  "age": 25,
  "gender": "男",
  "hobbies": ["篮球", "足球", "游泳"]
}

2、创建HTML文件

创建一个HTML文件，并在其中引入jQuery库，创建一个名为index.html的文件，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取本地JSON数据示例</title>
    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div id="result"></div>
    <script>
        // 以下是Ajax请求代码
    </script>
</body>
</html>

3、编写Ajax请求代码

在<script>标签中，编写Ajax请求代码，如下：

$(document).ready(function() {
    $.ajax({
        url: 'data.json', // 指定JSON文件路径
        type: 'GET', // 请求方式为GET
        dataType: 'json', // 返回数据类型为JSON
        success: function(data) {
            // 请求成功后的回调函数
            var html = '';
            $.each(data, function(key, value) {
                html += key + ': ' + value + '<br>';
            });
            $('#result').html(html); // 将数据展示到页面上
        },
        error: function(xhr, status, error) {
            // 请求失败后的回调函数
            console.log('Error: ' + error);
        }
    });
});

二、使用fetch API获取本地JSON数据

除了Ajax，我们还可以使用fetch API来获取本地JSON数据，以下是一个简单的示例：

1、修改HTML文件

在index.html文件的<script>标签中，编写以下代码：

fetch('data.json') // 指定JSON文件路径
    .then(response => response.json()) // 将返回的数据转换为JSON格式
    .then(data => {
        var html = '';
        for (var key in data) {
            html += key + ': ' + data[key] + '<br>';
        }
        document.getElementById('result').innerHTML = html; // 将数据展示到页面上
    })
    .catch(error => {
        console.log('Error: ' + error);
    });