首頁猿問將 .json 文件導入...

將 .json 文件導入 javascript 時，我的 HTML 文件無法從 javascript

JavaScript

慕桂英546537 2021-11-04 15:16:37

嘿，這真的很奇怪。我將在這里給出一些代碼示例：HTML：<body style="background-color:rgb(157, 163, 163)" onload="createData()"> <script src="indexLIS.js"></script> <script src="assets/initData.json"></script></body>Javascript：//import dataSource from './assets/initData.json';function createData(){ console.log("hey");}JSON：{ "dataSource":[ { "id": 0, "name":"TemporaryName", "node-level":0 } ]}在一個即使如此簡單的代碼示例中，每次我打開 HTML 時，我?guī)缀醵紩⒓丛诳刂婆_上打印“嘿”。但是，如果我取消注釋第一行 javascript 代碼并從 initData.json 導入數(shù)據(jù)，那么我會立即收到錯誤“createData not defined”，就好像 HTML 代碼完全失去了與 javascript 文件通信的能力。

查看完整描述

2 回答

函數(shù)式編程

TA貢獻1807條經驗獲得超9個贊

編輯：我剛剛意識到您正在使用上面的 es6 模塊語法（它對我來說就像代碼注釋）。

原答案：

你不能加載json在script標簽。當你這樣做時，瀏覽器無法解析它，這會殺死頁面上的所有腳本執(zhí)行。

如果您將initData.json文件更改為initData.js：

var jsonData = {

"dataSource":[

{

"id": 0,

"name":"TemporaryName",

"node-level":0

}

]

};

然后，您應該能夠從全局jsonData變量中引用數(shù)據(jù)。

反對回復 2021-11-04

倚天杖

TA貢獻1828條經驗獲得超3個贊

我最終能夠讓它為我工作。我不能肯定地說這是否是最適合每個人的答案，但它完成了我打算做的事情。

HTML：

</body>

Javascript：

function createData() {

$.getJSON('./assets/initData.json', function(json) {

console.log(json.dataSource);

});

}

Json 本身沒有任何變化，所以我不會發(fā)布它，但是這樣我就能夠導入 JSON 數(shù)據(jù)并與之交互，而不會破壞 javascript 文件和 html 之間的關系。必須在該function(json){}部分中的 json 中執(zhí)行您想做的所有事情似乎是有限的，但我在那里所做的只是發(fā)送json到另一個函數(shù)，因此它確實根本不會減慢我的速度。

反對回復 2021-11-04