亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

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

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

使用fetch,XMLHttpRequest之類(lèi)進(jìn)行異步請(qǐng)求。

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語(yǔ)法(比如[]內(nèi)的最后不應(yīng)以逗號(hào)結(jié)尾——理論上不應(yīng)該但實(shí)際寫(xiě)代碼追加數(shù)據(jù)時(shí)還要回頭給前面的數(shù)據(jù)加個(gè)逗號(hào)真的很煩)不然編輯器會(huì)報(bào)警(雖然運(yùn)行時(shí)一般并不會(huì)有數(shù)據(jù)讀取的問(wèn)題,目前沒(méi)碰到過(guò))。

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

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

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

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

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

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

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

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

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

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

這方法無(wú)需webserver,但需要三方文件相互適配。只能用在有html的場(chǎng)合。

第三類(lèi):做一個(gè)專(zhuān)門(mén)放置這些數(shù)據(jù)的js文件,export之,再在需要的文件中import.

如:

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

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

無(wú)需webserver(異步通訊),兩方文件適配。不能再簡(jiǎn)了。

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

最簡(jiǎn)單的解決辦法還是配個(gè)(本地)服務(wù)器。這就又跟方法1沒(méi)太大區(qū)別了。

要想不配這個(gè)(本地)服務(wù)器,還是得在方法2上改良:

方法4:

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

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

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

const jsnd={

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

}
const jsnd2={

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

}

上面這兩json變量/對(duì)象相當(dāng)于直接定義在全局(window?)中??梢栽谄渌械膉s文件中使用。而且是直接拿來(lái)就用。

無(wú)需webserver,無(wú)需JSON.parse();Fetch;或是import之類(lèi)。

非常方便。適合沒(méi)有敏感數(shù)據(jù),無(wú)需考慮安全問(wèn)題的情況。

總結(jié)

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

相關(guān)文章

最新評(píng)論