使用JS(和jquery和/或AJAX)在HTML中加载LOCAL JSON文件; ANSWER = IMPOSSIBLE

问题描述 投票:0回答:3

问题定义:

我正在编写一个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。飞行前响应不成功

我可以在这里放置Stack溢出的其他几个链接。没有人像他们所说的那样顺利运作。 (我正在使用MAC并在Safari和Chrome中尝试HTML)

最后,我当然希望将JSON传递给数组,以便在HTML的其他脚本中进行访问。

注意:有一些解决方案可以说本地机器必须作为服务器运行,而Httprequest应该在机器中完成。好吧,我不能这样做,因为用户只能打开html文件,但是没有任何东西可以让他们设置机器一样。

如果我得到关于如何继续的提示,我将非常高兴。现在我甚至不知道这是否真的可行。

非常感谢

javascript jquery json local-storage dynamically-generated
3个回答
0
投票

您可以使用另一个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文件。


0
投票

答案是:

由于安全原因,使用HTML读取本地文件(用户机器中的文件)是不可能的。

有趣的是,有很多帖子说的相反。

我理解,如果可能的数据可能会被盗。

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


0
投票

首先,您需要解析加载的json文件,因为在解析之前,内容只是字符串而您无法处理它。所以请按以下方式操作:

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

我希望它会对你有所帮助。

© www.soinside.com 2019 - 2024. All rights reserved.