Question

我是脚本语言的新手。我有一个new.json文件，我想加载gary.html HTML文件。我不想在服务器上运行gary.html文件。我想在我的机器上本地运行它。

当我的HTML文件使用new.json加载$.getJSON文件时，我得到一个空白屏幕，当我在控制台上检查时，我收到错误：

jquery-3.1.0.js：9392 XMLHttpRequest无法加载file：/// C：/Users/Gary/Desktop/new.json。交叉源请求仅支持协议方案：http，数据，chrome，chrome-extension，https，chrome-extension-resource。

这是我的加载代码

function show() {
    //read(a)
    var myItems;

    $.getJSON('new.json', function(data) {
        myItems = data.a;
        read(myItems)
    });
}

当我搜索此错误时，人们建议我在firefox上运行此文件，或执行此chrome --allow-file-access-from-files。该文件正在firefox中加载，当我执行chrome --allow-file-access-from-files时，文件也会加载chrome。

我主要担心的是，当我将new.json和gary.html文件分发给其他人时，其他人可能拥有或不拥有firefox或chrome的chrome --allow-file-access-from-files权限。我只是希望用户点击gary.html并加载new.json文件的数据。

我怎样才能做到这一点？

Answer 1

正如您所见 - 您无法向本地文件系统发出AJAX请求，因为它是一个巨大的安全问题。唯一的解决方法是让用户在浏览器中手动启用设置（无论如何这都不是一个好主意）。如果您不想这样，那么您将不得不为所有请求使用中央服务器。

另一种方法是通过使用额外的new.json标记在页面中包含<script />文件来避免使用AJAX。您还需要将对象分配给文件中的变量，如下所示：

// new.json
var newJson = {"a": [{"name":"avc"}, {"name":"Anna"}, {"name":"Peter"}]}

然后在gary.html：

<head>
    <script src="jquery.js"></script>
    <script src="new.json"></script>
    <script>
        $(function() {
            newJson.a.forEach(function(item) {
                console.log(item.name);
            });
        })
    </script>
</head>

Answer 2

您无法向本地文件系统发出AJAX请求，因为这是一个巨大的安全问题。为什么不能直接在HTML文件中直接包含JSON数据。你不必进行AJAX调用来获取JSON。

<head>
<script>
var jsonData = '{"a": [{"name":"avc"}, {"name":"Anna"}, {"name":"Peter"}]}';
for(var i=0; i< jsonData.a.length;i++)
{
var item = jsonData.a[i];
console.log(item.name);
}
</script>
</head>

使用jQuery / Javascript在本地系统中加载JSON文件

2 个答案: