如何将变量从 javascript 导入到 html 脚本标签答案

【问题标题】：how to import variable from javasvript to html script tag如何将变量从 javascript 导入到 html 脚本标签
【发布时间】：2021-11-04 01:47:16
【问题描述】：

我正在使用 django Templete 制作网页。在 HTML 脚本标签中，我创建了一个包含 geojson 数据的变量，因此它太长而无法包含在单个文件中。（大约 10000 行）所以我想将它分离到另一个地方。图片中的 var "areas" 就是它。

所以我想将该变量分离到另一个文件（可能是 .js 文件？任何格式都无所谓。）

我应该将该变量保存在哪里？是.js文件吗？
如何在 HTML 脚本标签中导入该变量？

感谢您的帮助！

【问题讨论】：

标签： javascript import django-templates

【解决方案1】：

只需使用仅包含变量的 JS 文件并通过脚本标签导入它就可以正常工作。就像它保存在 areas.js 中一样，请使用代码
<script src = "areas.js"></script>
在 body 标记中，您可以像在脚本中一样正常使用变量

【讨论】：

对不起，它似乎没有解决我的问题。 area.js 和 mainpage.html 位于同一目录中。 area.js : 变量 a=3; mainpage.html : 这并没有工作。
脚本标签应该是空的，没有任何其他控制台日志内容。就像在 mainpage.html 中的 body 标记中添加上面给出的代码（复制和粘贴）。然后，如果您想添加更多脚本，请添加另一个脚本标签并使用所需的功能。
更新后的代码应该是<script src = "areas.js"></script><script>console.log(a)</script>
这样，我在控制台中得到“a is not defined”……我不明白为什么……
将 a 替换为您为变量分配的变量，我猜是 areas，如您给出的屏幕截图所示

【解决方案2】：

您可以将该数据放在服务器上的.json 文件中。比执行以下操作来获取 json 并解析它。

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => {
     // Use data in your app.
  });

参考：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

您还可以使用 async/await 来避免 .then 和回调。

async function fetchMoviesJSON() {
  const response = await fetch('/movies.json');
  const movies = await response.json();
  // Use the data in your app.
}
fetchMoviesJSON();

【讨论】：

这里的OP想要在他的个人项目中使用数据，而不仅仅是在控制台上显示。
@mrtechtroid 该逻辑可以根据需要写在 .then() 中。
我知道，在主要问题中询问他如何将其作为变量导入而不是控制台记录。
@mrtechtroid 将我的答案更改为有评论而不是 console.log。