是否可以在您的 PC 上存储 HTML 和 JSON 文件，并让 HTML 在没有 node.js 或服务器的情况下加载 json 数据？

问题描述 投票：0回答：1

我偶然发现了一个问题，我正在处理一个将加载单独的 json 文件的 HTML 文件。 HTML 文件在 标签中有 JS 代码，json 文件包含一个包含一些对象的数组。 HTML 和 JSON 都存储在我的硬盘上，我的 HTML 将使用文件路径加载到我 PC 上的文件，而不是互联网上的 URL，到 json 文件，类似于使用相对路径的 img src 标签我电脑上的图像。

这个视频：https://www.youtube.com/watch?v=nx8E5BF0XuE 告诉我，由于 CORS 政策使得 $.ajax 获取存储在他的 PC 上的文件，需要服务器。

我最初在知道该视频之前尝试这样做：

        (async () => { 
            const List = await (await fetch("FileWithObjects.json")).json() 
        })()

并得到了类似的错误：

如果我既不想使用服务器也不想使用 node.js，我是否必须在 HTML 文件本身中包含 JSON 数据？

json loading external hard-drive
1个回答
0
投票

我在网上找不到有用的答案，所以我自己试了一下

您需要一个将 javascript 变量设置为 JSON 的 javascript 文件，而不是 JSON 文件。

index.htm

HTML 文件通过 

<script src

引用本地 javascript 文件 
<!DOCTYPE html>
<html>
  <head>
    <script src="script1.js"></script>
  </head>
  <body>
    <div id="mydiv"></div>
  <script>
    console.log(j);
    setTimeout(() => 
        {
            document.getElementById("mydiv").innerHTML=j.stuff[2];
        } , 
        5000  
    )
  </script>

  </body>
</html>

script1.js

这与 index.htm 在同一个文件夹中

注意这是一个 javascript 文件，它将 javascript 变量 

j
设置为您想要的 JSON。

j=
{
    "stuff": [0,1,2,3,4,5,6]
}

如果你打开网页，你会在静态json文件的左上角看到一个小2

请注意，您只能通过 javascript 操作 JSON（或执行任何非演示“计算”操作）。单独使用 HTML 无法对 JSON 做任何事情。

get
、
fetch
、
ajax
等所有方法只能从“web服务”加载数据，而这又需要一个web服务器

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.