【发布时间】：2016-12-17 17:19:42
【问题描述】：
我是脚本语言的新手。我已经用 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"}
]
}
]
}
]
}
]
}
]
}
这是我用来加载new.json 文件的jQuery/JavaScript 代码。我已经在<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>
当我在 Google Chrome 上运行此代码时。它给出了这个错误
jquery-3.1.0.js:9392 XMLHttpRequest 无法加载 file:///C:/Users/Girish/Desktop/new.json。仅协议方案支持跨源请求：http、data、chrome、chrome-extension、https、chrome-extension-resource。在控制台上。我用谷歌搜索了这个错误，我发现一些链接说在 Mozilla Firefox 上运行相同的文件。
我在 Mozilla Firefox 上运行的相同代码，它没有给出任何错误。它显示#tree div 中的项目。但是当我点击tree div 中的任何项目时。它没有在#list div 中显示其子元素。
现在我想在Chrome 和Firefox 上加载json 文件。如何解决上述错误？
为什么单击tree div 中的任何项目时，子项目没有显示在list div 中？
谢谢
【问题讨论】：
-
Stack Overflow 不是论坛，请为您的第二期发布一个单独的问题。
标签： javascript jquery html json