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

2023-09-27 03:48| 来源: 网络整理| 查看: 265

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

使用JavaScript读取json文件前言正式开始前提条件终于可以开始了全部代码

前言

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

正式开始前提条件

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

Text // 终于可以开始了

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) } }); //类似于方法二

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

全部代码

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

Text 测试 //方法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) } }); //类似于方法二

【本文地址】

公司简介

联系我们