Javascript 如何加载位于同一路径的JSON文件?
我正在寻找一种加载JSON文件的方法,该文件与html和js文件位于同一文件夹中。无论文件是托管在web服务器上还是分发供本地脱机使用,该方法都应该有效 我尝试使用XMLHttpRequest获取文件,但在脱机使用时,这似乎只适用于FirefoxJavascript 如何加载位于同一路径的JSON文件?,javascript,html,json,Javascript,Html,Json,我正在寻找一种加载JSON文件的方法,该文件与html和js文件位于同一文件夹中。无论文件是托管在web服务器上还是分发供本地脱机使用,该方法都应该有效 我尝试使用XMLHttpRequest获取文件,但在脱机使用时,这似乎只适用于Firefox 任何帮助都将不胜感激 没有可靠的跨浏览器方式来编写可以从用户文件系统加载文件的网页,即使页面是从那里加载的 将JSON嵌入JavaScript脚本。这里有两个选项 1) 将JSON数据嵌入js脚本中 或 2) 使用一个小的PHP文件获取文件内容,并使用
任何帮助都将不胜感激 没有可靠的跨浏览器方式来编写可以从用户文件系统加载文件的网页,即使页面是从那里加载的
将JSON嵌入JavaScript脚本。这里有两个选项 1) 将JSON数据嵌入js脚本中 或
2) 使用一个小的PHP文件获取文件内容,并使用AJAX将其带到js脚本。加载文件:data.json位于与html文件相同的路径,这可能有助于 路径 |-index.html |-data.json(json文件)
使用Jquery加载Json
身体{
文本对齐:居中;
字体系列:arial;
}
.按钮{
利润率:20px;
字体大小:16px;
字体大小:粗体;
填充物:5px10px;
}
//加载DOM时,我们将click事件附加到按钮
$(文档).ready(函数(){
//点击按钮后,我们下载数据
$('.button')。单击(函数(){
//启动ajax请求
$.ajax({
url:“data.json”,
//强制将其作为文本处理
数据类型:“文本”,
成功:功能(数据){
//下载的数据,因此我们称之为parseJSON函数
//并传递下载的数据
var json=$.parseJSON(数据);
//现在json变量包含json格式的数据
//让我们展示几个项目
$('#results').html('插件名称:'+json.name+'
作者:'+json.Author.name);
}
});
});
});
如果您不顾一切,可以使用jsonp
实现。
<html>
<head>
<title>Loading a Json using Jquery</title>
<style>
body{
text-align: center;
font-family: arial;
}
.button{
margin:20px;
font-size:16px;
font-weight: bold;
padding:5px 10px;
}
</style>
</head>
<body>
<a href="data.json" target="_blank">Open JSON file</a><br />
<input type="button" value="Get and parse JSON" class="button" />
<br />
<span id="results"></span>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
//When DOM loaded we attach click event to button
$(document).ready(function() {
//after button is clicked we download the data
$('.button').click(function(){
//start ajax request
$.ajax({
url: "data.json",
//force to handle it as text
dataType: "text",
success: function(data) {
//data downloaded so we call parseJSON function
//and pass downloaded data
var json = $.parseJSON(data);
//now json variable contains data in json format
//let's display a few items
$('#results').html('Plugin name: ' + json.name + '<br />Author: ' + json.author.name);
}
});
});
});
</script>
</body>
</html>