我是脚本语言的新手。我用 google 搜索了使用 jQuery 加载和解析 JSON 文件。我借助了从 Stack Overflow 获得的那些链接。
我有一个名为 new.json 的 JSON 文件.
{ "a": [
{"name":"avc"},
{"name":"Anna"},
{"name":"Peter"},
{"Folder": "ABC", "name":[
{"name":"John"},
{"name":"Anna"},
{"Folder":"XYZ", "name":[
{"name":"fdgh"},
{"name":"hdfghh"},
{"Folder":"JKL", "name":[
{"name":"gdfgdfgggggg"},
{"name":"hddddddddddddddddddddddddddddh"},
{"Folder":"PQR", "name":[
{"name":"gddddddg"},
{"name":"ddhh"}
]
}
]
}
]
}
]
}
]
}
这是我的代码 jQuery/JavaScript 代码来加载 new.json文件。我已经在 <script> 中编写了我的代码标签。
<script src="jquery-3.1.0.js"></script>
<script type="text/javascript" language="javascript" src="C:\Users\Girish\Desktop\new.json"></script>
<script type="text/javascript">
var out="<ul>";
var j=0;
function functionName(event) {
$('li[id^="foo"]').click(function(e){
e.stopPropagation();
var x = $(this).last().find(' > ul').clone().find('ul').remove().end();
$('#list').html(x);
$("#list .hide").show();
});
}
$(document).ready(function() {
$('li[id^="foo"]').each(function() {
$(this).on('click', {param: this.id}, functionName);
});
});
function read(obj){
for(var i = 0; i < obj.length; i++)
{
if(obj[i].Folder)
{
var name = "foo"+ ++j;
var name2 = "<li id=" + name + ">";
out = out+ name2 + obj[i].Folder + "<ul>";
document.getElementById("tree").innerHTML = out;
read(obj[i].name);
out=out+"</ul></li></ul>";
}
else
{
var name2 = "<li class=\"hide\">";
out = out+ name2 + obj[i].name;
document.getElementById("tree").innerHTML = out;
out=out+"</li>";
}
}
}
function show()
{
//read(a)
var myItems;
$.getJSON('new.json', function(data) {
myItems = data.a;
read(myItems)
});
}
</script>
这是<body>标签。
</div>
<div id="list"></div>
当我在谷歌浏览器上运行这段代码时。它给出了这个错误
jquery-3.1.0.js:9392 XMLHttpRequest无法加载 file:///C:/Users/Girish/Desktop/new.json .跨源请求仅支持协议(protocol)方案:http , 数据, chrome, chrome-extension, https , Chrome 扩展资源。在控制台上。我用谷歌搜索了这个错误，我发现一些链接说在 Mozilla Firefox 上运行相同的文件。
我在 Mozilla Firefox 上运行相同的代码，它没有给出任何错误。它正在显示 #tree 中的项目分区但是当我点击 tree 中的任何项目时分区它没有在 #list 中显示其子元素分区
现在我想在两个 Chrome 上加载 json 文件和 Firefox .我该如何解决上述错误？
为什么子项目没有显示在 list 中单击 tree 中的任何项目时的 div分区？
谢谢
最佳答案
这与 JQuery 无关。如果您在本地运行网页(URL 开头为 file:///)，您根本无法访问本地文件。它违反了本地运行页面的安全模型。
您收到的错误与称为 CORS(跨源资源共享)的东西有关，它是一种广泛使用的安全机制，只允许同一域中的客户端浏览器应用程序访问资源或 API。受信任的 CORS 策略之外的任何内容都会被拒绝。对于本地网页，文件被认为不在您的来源内；您的浏览器基本上认为您的硬盘位于不同的域中。否则，恶意脚本只需猜测访问路径即可轻松访问您的本地文件。
要解决此问题，您需要使用某种开发服务器(或成熟的网络服务器)，以便您的页面可以在本地托管。然后您可以通过http://localhost/ 或您的本地IP 地址访问您的页面，通常是http://127.0.0.1/。
可以托管静态文件的开发服务器的一些示例:
- Fenix Web Server看起来是静态托管的不错选择
- 如果您安装了 Python，
python -m SimpleHTTPServer将在http://localhost:8000/上启动一个服务器，在您启动它的任何文件夹中 - Mongoose似乎有不错的基于网络的管理控制台
基本上任何搜索static web server(与您的操作系统)应该找到很多简单的选项。
关于javascript - 使用 jQuery 在本地系统中加载和解析 JSON 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38888387/