CLI*_*159 1 html javascript jquery json
我是脚本语言的新手.我用google搜索使用jQuery加载和解析JSON文件.我已经从Stack Overflow获得了那些链接的帮助.
我有这个名为的JSON文件new.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上运行的代码相同,它没有给出任何错误.它显示#treediv中的项目.但是当我点击treediv中的任何项目时.它没有在#listdiv中显示其子元素.
现在,我想加载两个JSON文件Chrome和Firefox.我该如何解决上述错误？
为什么list在点击div中的任何项目时,子项目不显示在div中tree？
谢谢
这与JQuery无关.如果您在本地运行网页(file:///在URL的开头),则根本无法访问本地文件.它违反了本地运行页面的安全模型.
您收到的错误与称为CORS(跨源资源共享)的内容有关,并且是一种广泛使用的安全机制,仅允许同一域上的客户端浏览器应用程序访问资源或API.可信CORS策略之外的任何内容都会被拒绝.对于本地网页,文件被认为是在您的原始网站之外; 您的浏览器基本上认为您的硬盘驱动器位于不同的域上.否则,恶意脚本只需猜测访问路径就能轻松访问本地文件.
要解决此问题,您需要使用某种开发服务器(或完整的Web服务器),以便您的页面可以在本地托管.然后,您通常可以通过http://localhost/本地IP地址访问您的页面http://127.0.0.1/.
可以托管静态文件的开发服务器的一些示例:
python -m SimpleHTTPServer了Python,则会http://localhost:8000/在启动它的任何文件夹中启动服务器基本上任何搜索static web server(使用您的操作系统)都应该找到很多简单的选项.