新手如何使用JavaScript读取json文件

使用JavaScript读取json文件前言正式开始前提条件终于可以开始了全部代码前言最近尝试使用js读取json文件，并调用json的数据。在网上找到各种大佬写的教程，拷贝到自己电脑上就各种报错，对于新手来说不太友好。经过一个下午的时间终于搞定，这里做个记录，希望帮助到js新手，欢迎大佬批评指正~正式开始前提条件网上最多的方法就是让使用ajax读取，但是我一用浏览器就报错查资料才知道...

凉面条加鸡蛋

31482人浏览 · 2020-03-30 10:24:24

凉面条加鸡蛋 · 2020-03-30 10:24:24 发布

2023年2月27日更新：
时隔3年，这篇博客现在仍时常有小伙伴访问。
但是本博客内容在我现在看来质量一般，因此重写了一篇更简单更高效的版本
可以直接跳转这篇《新手如何使用JavaScript读取json文件 v2.0》

前言

最近尝试使用js读取json文件，并调用json的数据。在网上找到各种大佬写的教程，拷贝到自己电脑上就各种报错，对于新手来说不太友好。经过一个下午的时间终于搞定，自己走了很多弯路，所以在这里做个记录，希望帮助到js新手少走弯路，欢迎大佬批评指正~

正式开始

前提条件

网上最多的方法就是让使用ajax读取，但是我自己一用，浏览器就报错
在这里插入图片描述
通过查资料才知道，原来是因为没有引入jquery，需要在head中引入jquery

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text</title>
    <!-- 引入jquery -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>//
</head>

终于可以开始了

json数据如下

[
    {
        "year": 2011,
        "province": "湖北",
        "city": "武汉",
        "housingprise": 7954
    },
    {
        "year": 2011,
        "province": "河南",
        "city": "郑州",
        "housingprise": 6566
    },
    {
        "year": 2020,
        "province": "湖北",
        "city": "武汉",
        "housingprise": 15998
    },
    {
        "year": 2020,
        "province": "河南",
        "city": "郑州",
        "housingprise": 13597
    }
]

下面开始读取json数据
总共尝试了三种方法，这里一一进行介绍

方法一
代码如下
参考博客https://blog.csdn.net/weixin_43356295/article/details/82966046

       //方法1
        var data =  $.parseJSON($.ajax({
            url: "textJsonData.json",//json文件位置，文件名
            dataType: "json", //返回数据格式为json
            async: false
        }).responseText);
        console.log(data);
        //此方法会报错：主线程中同步的 XMLHttpRequest 已不推荐使用，因其对终端用户的用户体验存在负面影响

运行结果就是也能执行，但是浏览器会发出警告
方法一运行结果
网上查的方法让把

async: false

改成

async: true

但是改完了数据直接无法读取了，这里不找到为什么，知道原因的请告诉我
浏览器报错
出于强迫症，肯定不能允许这种情况的出现，于是转向方法二

方法二
代码如下
参考博客https://blog.csdn.net/ClearLoveQ/article/details/90480207

        //方法二
        var Ajax = function () {
            $.getJSON("textJsonData.json", function (data) {
                console.log(data);
            });
        }();
        //此方法只能在内部访问数据

运行结果如下，可以正确读取
方法二运行结果
但是此方法只能在$.getJSON内部访问数据，在外部无法获取，解决方法是：可以在内部传入一个函数，而函数体写在外部

于是，将上面的代码改成

        var Ajax = function () {
            $.getJSON("textJsonData.json", function (data) {
                displayData(data)//传入一个函数
            });
        }();

在外部定义displayData函数

        var displayData= function(data){
            console.log(data);
        }

方法三
与方法2类似，也需要用到外部的displayData函数，也是被最多人推荐的方法，代码如下

        //方法三
        $.ajax({
            url: "textJsonData.json",
            type: "GET",
            dataType: "json",
            success: 
            function (data) {
                displayData(data)
            }
        });
        //类似于方法二

同样正确读取数据
方法三运行结果

全部代码

希望对大家起到帮助，欢迎大家批评指正！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text</title>
    <!-- 引入jquery -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>

<body>
    <h1>测试</h1>
    <script>
        //方法1
        var data =  $.parseJSON($.ajax({
            url: "textJsonData.json",//json文件位置，文件名
            dataType: "json", //返回数据格式为json
            async: false
        }).responseText);
        console.log(data);
        //此方法会报错：主线程中同步的 XMLHttpRequest 已不推荐使用，因其对终端用户的用户体验存在负面影响

        //方法二
        var Ajax = function () {
            $.getJSON("textJsonData.json", function (data) {
                displayData(data)//传入一个函数
            });
        }();
        //此方法只能在内部访问数据

        var displayData= function(data){
            console.log(data);
        }

        //方法三
        $.ajax({
            url: "textJsonData.json",
            type: "GET",
            dataType: "json",
            success: 
            function (data) {
                displayData(data)
            }
        });
        //类似于方法二

    </script>
</body>

</html>