當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

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

發布時間：2023/12/10 javascript 44 豆豆

生活随笔收集整理的這篇文章主要介紹了新手如何使用JavaScript读取json文件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

使用JavaScript讀取json文件

前言
正式開始
- - 前提條件
  - 終于可以開始了
全部代碼

前言

最近嘗試使用js讀取json文件，并調用json的數據。在網上找到各種大佬寫的教程，拷貝到自己電腦上就各種報錯，對于新手來說不太友好。經過一個下午的時間終于搞定，自己走了很多彎路，所以在這里做個記錄，希望幫助到js新手少走彎路，歡迎大佬批評指正~

正式開始

前提條件

網上最多的方法就是讓使用ajax讀取，但是我自己一用，瀏覽器就報錯

通過查資料才知道，原來是因為沒有引入jquery，需要在head中引入jquery

終于可以開始了

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><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文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：数学建模：Leslie离散人口发展模型
下一篇： JavaScript入门（介绍及入门编程