前言

最近尝试使用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

       //方法1var data =  $.parseJSON($.ajax({url: "textJsonData.json",//json文件位置，文件名dataType: "json", //返回数据格式为jsonasync: 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>//方法1var data =  $.parseJSON($.ajax({url: "textJsonData.json",//json文件位置，文件名dataType: "json", //返回数据格式为jsonasync: 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>

新手如何使用JavaScript读取json文件相关推荐

新手如何使用JavaScript读取json文件 v2.0
前言 3年前,我在纯小白时期写的一篇文章:新手如何使用JavaScript读取json文件至今仍时常有小伙伴点击. 如今自己在此知识领域已经有所成长,故重写一篇更高质量,更有帮助的文章,希望更有效的 ...
《机器学习与数据科学（基于R的统计学习方法）》——2.8　读取JSON文件
本节书摘来异步社区<机器学习与数据科学(基于R的统计学习方法)>一书中的第2章,第2.8节,作者:[美]Daniel D. Gutierrez(古铁雷斯),更多章节内容可以访问云栖社区&q ...
本地服务器json文件,从本地ftp服务器读取Json文件
我是存储在本地服务器中的名为File1.js的json文件.我想读取json文件的内容,并希望在其他文件中显示数据.我已经尝试使用JavaScript编码,但它不能正常工作.从本地ftp服务器读取Js ...
Java 读取 JSON 文件转成 Map 对象
Java 读取 JSON 文件转成 Map 对象应用场景待读取的外部 JSON 文件 Java 代码读取结果 Gson 应用场景 Jar 包或 War 包引用一个外部文件作为项目运行的配置文件 ...
netcore读取json文件_.net core读取json格式的配置文件
在.Net Framework中,配置文件一般采用的是XML格式的,.NET Framework提供了专门的ConfigurationManager来读取配置文件的内容,.net core中推荐使用j ...
R读取json文件并转化为dataframe
R读取json文件并转化为dataframe 目录 R读取json文件并转化为dataframe R读取json文件把json转为dataframe
cocos2d-x之读取json文件
cocos2d-x之读取json文件在resource文件夹下,添加data.json文件新建->Other->empty->open 就新建一个json文件了, data.js ...
javascript读取xml文件读取节点数据的例子
分享下用javascript读取xml文件读取节点数据方法. 读取的节点数据,还有一种情况是读取节点属性数据. <head> <title></title> < ...
python读取json配置文件_Python简单读取json文件功能示例
本文实例讲述了Python简单读取json文件功能.分享给大家供大家参考,具体如下: read_json.json: { "rule":{ "namespace" ...
java spark 读取json_apache-spark - 与aws-java-sdk链接时，在读取json文件时发生Spark崩溃 - 堆栈内存溢出...
让config.json成为一个小的json文件: { "toto": 1 } 我做了一个简单的代码,用sc.textFile读取json文件(因为文件可以在S3,本地或HDFS上 ...

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

使用JavaScript读取json文件

前言

正式开始

前提条件

终于可以开始了

全部代码

新手如何使用JavaScript读取json文件相关推荐

最新文章

热门文章