使用 JS（和 jquery 和/或 AJAX）在 HTML 中加载 LOCAL JSON 文件；答案=不可能答案

【问题标题】：Load LOCAL JSON file in an HTML using JS (and jquery and/or AJAX); ANSWER=IMPOSSIBLE使用 JS（和 jquery 和/或 AJAX）在 HTML 中加载 LOCAL JSON 文件；答案=不可能
【发布时间】：2018-09-03 14:01:39
【问题描述】：

问题定义：

我正在编写一个 HTML 文件，以便在不作为服务器运行的用户机器上本地运行。用户可以运行本地存储在他的计算机中的这个 html 文件。 HTML 文件将根据存储在他机器本地特定文件夹中的数据动态生成一个表（始终相同）。此数据是一个 JSON 文件。

为清楚起见，假设 JSON 文件与 HTML 文件位于同一文件夹中。

我在互联网上阅读了很多内容，但无济于事。例如： a) here 与：

$.getJSON("books.json", function(json) {
    console.log(json);
    //access your JSON file through the variable "json"
});

不工作。

或者使用this code:

jQuery.getJSON("data.json", handleJSON);

function handleJSON(result){
   jQuery.each(result, printFields);
}

function printFields(i, field){
   let row = field.id + " "+field.first_name + " "+field.last_name + " <br>";
   jQuery("div").append(row);
}

控制台说： [错误] 加载资源失败：预检响应不成功（data.json，第 0 行） [错误] XMLHttpRequest 无法加载文件：///Users/jose/CODE/HTML/ConceptsHTML/example%203/data.json。预检响应不成功

还有其他几个堆栈溢出的链接我可以放在这里。没有人能像他们所说的那样顺利运行。（我正在使用 MAC 并在 Safari 和 Chrome 中尝试 HTML）

最终，我当然希望将 JSON 传递给一个数组，以便在 HTML 的其他脚本中访问。

注意：有一些解决方案是说本地机器必须作为服务器运行，并且应该在机器中完成 Httprequest。好吧，我不能这样做，因为用户只能打开 html 文件，但不能期望他们将机器设置为一如既往。

如果我得到有关如何进行的提示，我将非常高兴。现在我什至不知道这是否真的可以做到。

非常感谢

【问题讨论】：

你不能那样做。
谢谢。你能详细说明一下吗？应该存在这样的情况，即用户拥有无法访问任何外部服务器但可以存储在本地的敏感数据。我无法想象我是第一个遇到这个问题的人。这意味着不可能使用 HTML 来基于本地数据构建网站。
这一切都是假的吗？：scotch.io/tutorials/… 在这个例子中，网站在本地加载图片。
这只能通过让用户明确选择文件而不是硬编码路径来实现。是的，不可能使用 HTML 来基于本地数据（没有服务器）构建网站。您应该使用服务器。

标签： javascript jquery json local-storage dynamically-generated

【解决方案1】：

你可以使用另一个 JS 文件并在你的 HTML 文件中链接到它，然后在那个 JS 文件中用你想要的数据创建一个对象。

HTML：

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="json.js"></script>
    <script type="text/javascript">
        function fun(){
            alert(json.data);
        }
    </script>
</head>
<body>
    <button onclick="fun();">push me</button>
</body>
</html>

JS（json.js）：

var json = {
data : "hello world"
};

无法链接到本地 JSON 文件。

【讨论】：

【解决方案2】：

答案是：

由于安全原因，无法使用 HTML 读取本地文件（用户机器中的文件）。

有趣的是，有很多帖子都在说相反的事情。

我知道，如果这可能是敏感数据，可能会被盗。

html 未来版本的改进将是为本地创建一种方式。用户告诉本地浏览器哪个本地文件夹是“免费的”，可以通过 html 访问。

【讨论】：

【解决方案3】：

首先需要解析加载的json文件，因为在解析之前，内容只是字符串，无法处理。所以请执行以下操作：

function handleJSON(result){
   result = JSON.parse(result); // using json.parse function to convert string to a valid json model.
   jQuery.each(result, printFields);
}

希望对你有所帮助。

【讨论】：