将 .json 文件导入 javascript 时，我的 HTML 文件无法从 javascript

将 .json 文件导入 javascript 时，我的 HTML 文件无法从 javascript

嘿，这真的很奇怪。

我将在这里给出一些代码示例：

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 时，我几乎都会立即在控制台上打印“嘿”。但是，如果我取消注释第一行 javascript 代码并从 initData.json 导入数据，那么我会立即收到错误“createData not defined”，就好像 HTML 代码完全失去了与 javascript 文件通信的能力。

慕桂英546537

浏览 270回答 2

2回答

函数式编程

编辑：我刚刚意识到您正在使用上面的 es6 模块语法（它对我来说就像代码注释）。原答案：你不能加载json在script标签。当你这样做时，浏览器无法解析它，这会杀死页面上的所有脚本执行。如果您将initData.json文件更改为initData.js：var jsonData = {    "dataSource":[        {            "id": 0,            "name":"TemporaryName",            "node-level":0         }     ]};然后，您应该能够从全局jsonData变量中引用数据。

0

0

倚天杖

我最终能够让它为我工作。我不能肯定地说这是否是最适合每个人的答案，但它完成了我打算做的事情。HTML：<body style="background-color:rgb(157, 163, 163)" onload="createData()">    <script type="text/javascript" src="indexLIS.js"></script></body>Javascript：function createData() {    $.getJSON('./assets/initData.json', function(json) {        console.log(json.dataSource);    });}Json 本身没有任何变化，所以我不会发布它，但是这样我就能够导入 JSON 数据并与之交互，而不会破坏 javascript 文件和 html 之间的关系。必须在该function(json){}部分中的 json 中执行您想做的所有事情似乎是有限的，但我在那里所做的只是发送json到另一个函数，因此它确实根本不会减慢我的速度。

0

0

随时随地看视频慕课网APP

相关分类

JavaScript