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


使用JavaScript读取json文件

  • 前言
  • 正式开始
  • 前提条件
  • 终于可以开始了
  • 全部代码


前言

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

正式开始

前提条件

网上最多的方法就是让使用ajax读取，但是我自己一用，浏览器就报错

ios读取本地json分组排序 js读取本地json文件内容_js


通过查资料才知道，原来是因为没有引入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数据
总共尝试了三种方法，这里一一进行介绍

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

运行结果就是也能执行，但是浏览器会发出警告

ios读取本地json分组排序 js读取本地json文件内容_js_02


网上查的方法让把

async: false

改成

async: true

但是改完了数据直接无法读取了，这里不找到为什么，知道原因的请告诉我

ios读取本地json分组排序 js读取本地json文件内容_json_03


出于强迫症，肯定不能允许这种情况的出现，于是转向方法二

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

运行结果如下，可以正确读取

ios读取本地json分组排序 js读取本地json文件内容_ios读取本地json分组排序_04


但是此方法只能在$.getJSON内部访问数据，在外部无法获取，解决方法是：可以在内部传入一个函数，而函数体写在外部

于是，将上面的代码改成

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

在外部定义displayData函数

var displayData= function(data){
            console.log(data);
        }
  1. 方法三
    与方法2类似，也需要用到外部的displayData函数，也是被最多人推荐的方法，代码如下
//方法三
        $.ajax({
            url: "textJsonData.json",
            type: "GET",
            dataType: "json",
            success: 
            function (data) {
                displayData(data)
            }
        });
        //类似于方法二

同样正确读取数据

ios读取本地json分组排序 js读取本地json文件内容_js_05

全部代码

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

<!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>