JS读取本地json文件的方法汇总

发表于 |

前言

对于单纯的静态网站而言, 我们有时候可能会直接将json数据放在本地, 此时涉及到json文件内容读取的问题

假设html同级目录下有一个名为data.json的文件, 读取的方式有:

第一种 使用ajax

1
2
3
4
5
6
7
8
9
$.ajax({
                url: "data.json",//同文件夹下的json文件路径
                type: "GET",//请求方式为get
                dataType: "json", //返回数据格式为json
                success: function (data) {//请求成功完成后要执行的方法 
                    console.log(data);
                }

            })

第二种 getJson

1
2
3
$.getJSON("data.json", function (data) {
              console.log(data)
          });

第三种 使用原生XMLHttpRequest

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var url = "data.json"
// 申明一个XMLHttpRequest
var request = new XMLHttpRequest();
// 设置请求方法与路径
request.open("get", url);
// 不发送数据到服务器
request.send(null);
//XHR对象获取到返回信息后执行
request.onload = function () {
    // 解析获取到的数据
    var data = JSON.parse(request.responseText);
    console.log(data)

}

跨域问题

我们在进行本地代码测试的时候, 如果以双击的形式打开html, 会出现跨域问题, 浏览器控台报错如下:

1
Access to XMLHttpRequest at 'file:///Users/songjian/Desktop/data.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https, isolated-app

解决方法有两种:

  1. 第一种是给网页添加一个域名, 比如localhost, 我们可以使用python或者nodejs在本地启动一个服务, 这里以python3为例:

    1
    python -m http.server 8000

    启动服务后, 浏览器输入localhost:8000, 即可正常获取到本地json数据

  2. 第二种是修改本地浏览器设置, 以Windows平台谷歌浏览器为例, 启动时添加参数--allow-file-access-from-files

    20201223114910

本文为作者原创转载时请注明出处 谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

0%