使用jQuery / Javascript在本地系统中加载JSON文件
[英]Load a JSON file in local system using jQuery/Javascript
问题描述
I am new to scripting languages. 
我是脚本语言的新手。 I have a new.json file and I want to load in gary.html HTML file. 我有一个new.json文件，我想加载gary.html HTML文件。 I do not want to run gary.html file on server. 我不想在服务器上运行gary.html文件。 I want to run it locally on my machine. 我想在我的机器上本地运行它。
When my HTML file loads the new.json file using $.getJSON , I get a blank screen and when I checked on console I get the error: 当我的HTML文件使用$.getJSON加载new.json文件时，我得到一个空白屏幕，当我在控制台上检查时，我收到错误：
jquery-3.1.0.js:9392 XMLHttpRequest cannot load file:///C:/Users/Gary/Desktop/new.json.
and this my loading code 这是我的加载代码
function show() {
//read(a)
var myItems;
$.getJSON('new.json', function(data) {
myItems = data.a;
read(myItems)
});
}
When I googled for this error, people suggest to me run this file on firefox, or execute this chrome --allow-file-access-from-files . 当我搜索此错误时，人们建议我在firefox上运行此文件，或执行此chrome --allow-file-access-from-files 。 The file is loading in firefox and when I am executing the chrome --allow-file-access-from-files , the File also loads in chrome. 该文件正在firefox中加载，当我执行chrome --allow-file-access-from-files ，文件也会加载chrome。
My main concern is that when I distribute the new.json and gary.html file to others then others may or may not have firefox or chrome's chrome --allow-file-access-from-files permission. 我主要担心的是，当我将new.json和gary.html文件分发给其他人时，其他人可能有也可能没有firefox或chrome的chrome --allow-file-access-from-files权限。 I just want user to click on gary.html and it loads the data of new.json file. 我只想让用户点击gary.html并加载new.json文件的数据。
How can I achieve that? 我怎样才能做到这一点？
2 个解决方案
解决方案1
2 已采纳 2016-08-11 09:03:45
As you've seen - you can't make AJAX requests to the local filesystem as it's a huge security issue. 正如您所见 - 您无法向本地文件系统发出AJAX请求，因为它是一个巨大的安全问题。 The only workaround for this is for the user to manually enable settings in their browser (which is not a great idea anyway). 唯一的解决方法是让用户在浏览器中手动启用设置（无论如何这都不是一个好主意）。 If you do not want this then you will have to use a central server for all requests. 如果您不想这样，那么您将不得不为所有请求使用中央服务器。
The alternative is to avoid using AJAX by including the new.json file in the page using an extra <script /> tag. 另一种方法是通过使用额外的<script />标记在页面中包含new.json文件来避免使用AJAX。 You will also need to assign the object to a variable in the file, something like this: 您还需要将对象分配给文件中的变量，如下所示：
// new.json
var newJson = {"a": [{"name":"avc"}, {"name":"Anna"}, {"name":"Peter"}]}
Then in gary.html : 然后在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>
解决方案2
1 2016-08-11 10:11:53
You can't make AJAX requests to the local filesystem as it's a huge security issue. 您无法向本地文件系统发出AJAX请求，因为这是一个巨大的安全问题。 Why cant you directly include the JSON data in HTML file directly. 为什么不能直接在HTML文件中直接包含JSON数据。 You wont have to make AJAX call to fetch the 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.