Ven*_*hna 38 html javascript jquery json
嗨,我试图使用JQuery加载本地JSON文件来显示数据,但我得到一些奇怪的错误.我可以知道如何解决这个问题.
<html>
<head>
<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$.getJSON( "priorities.json" , function( result ){
alert(result.start.count);
});
});
</script></head>
</html>
我只是提醒JSON数据的数量.我的JSON文件位于此html文件所在的目录中,JSON字符串格式如下所示.
{
"start": {
"count": "5",
"title": "start",
"priorities": [
{
"txt": "Work"
},
{
"txt": "Time Sense"
},
{
"txt": "Dicipline"
},
{
"txt": "Confidence"
},
{
"txt": "CrossFunctional"
}
]
}
}
JSON文件名的priority.json和错误是
未定义未捕获的Referenceerror优先级
Kha*_* TO 34
由于安全问题(相同的原始策略),如果没有用户交互,则对本地文件的javascript访问受到限制.
根据https://developer.mozilla.org/en-US/docs/Same-origin_policy_for_file:_URIs:
仅当原始文件的父目录是目标文件的祖先目录时,文件才能读取另一个文件.
想象一下,当一个网站的javascript试图在你的系统中的任何地方窃取你的文件而你不知道的情况.您必须将其部署到Web服务器.或者尝试使用脚本标记加载它.像这样:
<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" language="javascript" src="priorities.json"></script>
<script type="text/javascript">
$(document).ready(function(e) {
alert(jsonObject.start.count);
});
</script>
您的priority.json文件:
var jsonObject = {
"start": {
"count": "5",
"title": "start",
"priorities": [
{
"txt": "Work"
},
{
"txt": "Time Sense"
},
{
"txt": "Dicipline"
},
{
"txt": "Confidence"
},
{
"txt": "CrossFunctional"
}
]
}
}
或者在页面上声明一个回调函数并像jsonp技术一样包装它:
<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(e) {
});
function jsonCallback(jsonObject){
alert(jsonObject.start.count);
}
</script>
<script type="text/javascript" language="javascript" src="priorities.json"></script>
您的priority.json文件:
jsonCallback({
"start": {
"count": "5",
"title": "start",
"priorities": [
{
"txt": "Work"
},
{
"txt": "Time Sense"
},
{
"txt": "Dicipline"
},
{
"txt": "Confidence"
},
{
"txt": "CrossFunctional"
}
]
}
})
使用脚本标记与JSONP类似,但是使用这种方法并不是那么灵活.我建议将其部署在Web服务器上.
通过用户交互,允许javascript访问文件.就是File API的情况.使用文件api,javascript可以访问用户从<input type="file"/>桌面选择的文件或从桌面删除到浏览器.
sen*_*tor 25
您只需在HTML中包含一个Javascript文件,即将JSON对象声明为变量.然后,您可以使用data.employees例如全局Javascript范围访问JSON数据.
index.html的:
<html>
<head>
</head>
<body>
<script src="data.js"></script>
</body>
</html>
data.js:
var data = {
"start": {
"count": "5",
"title": "start",
"priorities": [{
"txt": "Work"
}, {
"txt": "Time Sense"
}, {
"txt": "Dicipline"
}, {
"txt": "Confidence"
}, {
"txt": "CrossFunctional"
}]
}
}
heq*_*equ 22
正如jQuery API所说:"使用GET HTTP请求从服务器加载JSON编码的数据."
http://api.jquery.com/jQuery.getJSON/
因此,您无法加载具有该功能的本地文件.但是当你浏览网页时,你会发现在javascript中加载文件系统中的文件非常困难,如下面的主题所示:
| 归档时间： |
|
| 查看次数： |
262050 次 |
| 最近记录： |