日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當(dāng)前位置： 首頁 > 前端技术 > javascript >内容正文

javascript

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

發(fā)布時間：2023/12/10 javascript 29 豆豆
生活随笔 收集整理的這篇文章主要介紹了 新手如何使用JavaScript读取json文件 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

使用JavaScript讀取json文件

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

前言

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

正式開始

前提條件

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

通過查資料才知道，原來是因?yàn)闆]有引入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數(shù)據(jù)如下

[{"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數(shù)據(jù)
總共嘗試了三種方法，這里一一進(jìn)行介紹

  • 方法一
    代碼如下
    參考博客https://blog.csdn.net/weixin_43356295/article/details/82966046
    • //方法1var data = $.parseJSON($.ajax({url: "textJsonData.json",//json文件位置，文件名dataType: "json", //返回?cái)?shù)據(jù)格式為jsonasync: false}).responseText);console.log(data);//此方法會報錯：主線程中同步的 XMLHttpRequest 已不推薦使用，因其對終端用戶的用戶體驗(yàn)存在負(fù)面影響

    運(yùn)行結(jié)果就是也能執(zhí)行，但是瀏覽器會發(fā)出警告

    網(wǎng)上查的方法讓把

    async: false

    改成

    async: true

    但是改完了數(shù)據(jù)直接無法讀取了，這里不找到為什么，知道原因的請告訴我

    出于強(qiáng)迫癥，肯定不能允許這種情況的出現(xiàn)，于是轉(zhuǎn)向方法二

  • 方法二
    代碼如下
    參考博客https://blog.csdn.net/ClearLoveQ/article/details/90480207
    • //方法二var Ajax = function () {$.getJSON("textJsonData.json", function (data) {console.log(data);});}();//此方法只能在內(nèi)部訪問數(shù)據(jù)

    運(yùn)行結(jié)果如下，可以正確讀取

    但是此方法只能在$.getJSON內(nèi)部訪問數(shù)據(jù)，在外部無法獲取，解決方法是：可以在內(nèi)部傳入一個函數(shù)，而函數(shù)體寫在外部

    于是，將上面的代碼改成

    var Ajax = function () {$.getJSON("textJsonData.json", function (data) {displayData(data)//傳入一個函數(shù)});}();

    在外部定義displayData函數(shù)

    var displayData= function(data){console.log(data);}
  • 方法三
    與方法2類似，也需要用到外部的displayData函數(shù)，也是被最多人推薦的方法，代碼如下
    • //方法三$.ajax({url: "textJsonData.json",type: "GET",dataType: "json",success: function (data) {displayData(data)}});//類似于方法二

    同樣正確讀取數(shù)據(jù)

    全部代碼

    希望對大家起到幫助，歡迎大家批評指正！

    <!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", //返回?cái)?shù)據(jù)格式為jsonasync: false}).responseText);console.log(data);//此方法會報錯：主線程中同步的 XMLHttpRequest 已不推薦使用，因其對終端用戶的用戶體驗(yàn)存在負(fù)面影響//方法二var Ajax = function () {$.getJSON("textJsonData.json", function (data) {displayData(data)//傳入一個函數(shù)});}();//此方法只能在內(nèi)部訪問數(shù)據(jù)var displayData= function(data){console.log(data);}//方法三$.ajax({url: "textJsonData.json",type: "GET",dataType: "json",success: function (data) {displayData(data)}});//類似于方法二</script> </body></html>

    總結(jié)

    以上是生活随笔為你收集整理的新手如何使用JavaScript读取json文件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。