欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS導(dǎo)入本地json文件數(shù)據(jù)的三類方法舉例講解

 更新時(shí)間：2024年09月01日 11:09:12   作者：qq_373027170  
作為一名剛?cè)胄械拈_發(fā)者,你可能會遇到需要在JavaScript中引用JSON文件的情況,下面這篇文章主要給大家介紹了關(guān)于JS導(dǎo)入本地json文件數(shù)據(jù)的三類方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

這個(gè)本地json文件中往往保存一些（無需在js腳本中改動(dòng)，又常需手動(dòng)改動(dòng)的一些各種設(shè)定之類的）靜態(tài)數(shù)據(jù)。

第一類：將本地?cái)?shù)據(jù)視為網(wǎng)絡(luò)數(shù)據(jù)

使用fetch,XMLHttpRequest之類進(jìn)行異步請求。

const jsnd=fetch('data.json')
.then(res=>res.json())
.then(data=>{console.log(data);return data})
.catch(err=>{console.log(err);})

相關(guān)json文件數(shù)據(jù)需嚴(yán)格遵循json語法（比如[]內(nèi)的最后不應(yīng)以逗號結(jié)尾——理論上不應(yīng)該但實(shí)際寫代碼追加數(shù)據(jù)時(shí)還要回頭給前面的數(shù)據(jù)加個(gè)逗號真的很煩）不然編輯器會報(bào)警（雖然運(yùn)行時(shí)一般并不會有數(shù)據(jù)讀取的問題，目前沒碰到過）。

異步通訊可能有點(diǎn)廢時(shí)，還需要有配套的(本地)webserver.

第二類：將本地?cái)?shù)據(jù)以<script src="./data.json"></script>的形式“注入”為全局變量/對象

<!DOCTYPE html>
<html>
<head>
……
<script src="./data.json"></script>
</head>
<body >
……
</body>
</html>

相關(guān)data.json文件(可自行命名)寫法會很不規(guī)范。需要在{}前加個(gè)“（全局）變量名=”：

dataJson={
    原json數(shù)據(jù)
}

把這個(gè)data.json文件后綴從.json改成.txt之類也能正常運(yùn)轉(zhuǎn)（相關(guān)的html中的src也相應(yīng)地改后綴為txt,比如data.txt就行）。

也就是說這里注入的其實(shí)不是json數(shù)據(jù)，而是一段js代碼;只是這段代碼恰好定義了一個(gè)名為dataJson的object。

所以在相關(guān)js文件中導(dǎo)入/使用這個(gè)全局對象為json數(shù)據(jù)時(shí)（為求保險(xiǎn)）宜加一個(gè)轉(zhuǎn)換過程，如：

const jsnd=JSON.parse(JSON.stringify(dataJson));

或

const jsnd=JSON.parse(dataJson);
//JSON.stringify()的作用是將 JavaScript 對象轉(zhuǎn)換為 JSON 字符串，而JSON.parse()可以將JSON字符串轉(zhuǎn)為一個(gè)對象。

這方法無需webserver,但需要三方文件相互適配。只能用在有html的場合。

第三類：做一個(gè)專門放置這些數(shù)據(jù)的js文件，export之，再在需要的文件中import.

如：

//文件名sj.js
const sj1={
……
……
……
}
const sj2={
……
……
……
}
export {sj1,sj2}
import {sj1,sj2} from './sj'

思路其實(shí)是方法2改良版。

無需webserver（異步通訊）,兩方文件適配。不能再簡了。

……實(shí)際測試發(fā)現(xiàn)，這個(gè)方法的html文件在本地文件系統(tǒng)打開時(shí)會觸發(fā)跨域問題：Access to script at 'file:……' from origin 'null' has been blocked by CORS policy：……

最簡單的解決辦法還是配個(gè)（本地）服務(wù)器。這就又跟方法１沒太大區(qū)別了。

要想不配這個(gè)（本地）服務(wù)器，還是得在方法２上改良：

方法４：

<!DOCTYPE html>
<html>
<head>
……
<script type="text/javascript" src="./data.js"></script>
</head>
<body >
……
</body>
</html>

／／type="text/javascript"這一小段可省略。

跟方法２的差別是這里導(dǎo)入的是js文件/js代碼段。里邊的內(nèi)容就是普通的js寫法。比如

const jsnd={

//json數(shù)據(jù)

}
const jsnd2={

//json數(shù)據(jù)

}

上面這兩json變量/對象相當(dāng)于直接定義在全局（window?）中。可以在其它所有的js文件中使用。而且是直接拿來就用。

無需webserver,無需JSON.parse();Fetch;或是import之類。

非常方便。適合沒有敏感數(shù)據(jù)，無需考慮安全問題的情況。

總結(jié)

到此這篇關(guān)于JS導(dǎo)入本地json文件數(shù)據(jù)的三類方法的文章就介紹到這了,更多相關(guān)JS導(dǎo)入本地json文件數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論