如果我有一个名为 names.json 的 JSON 文件：
{"employees":[
{"firstName":"Anna","lastName":"Meyers"},
{"firstName":"Betty","lastName":"Layers"},
{"firstName":"Carl","lastName":"Louis"},
]}
如何在 javascript 中使用它的内容？
【问题讨论】：
标签： javascript jquery json getjson
如何做到这一点的一个例子可能是：
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$.getJSON('names.json',function(data){
console.log('success');
$.each(data.employees,function(i,emp){
$('ul').append('<li>'+emp.firstName+' '+emp.lastName+'</li>');
});
}).error(function(){
console.log('error');
});
});
</script>
</head>
<body>
<ul></ul>
</body>
</html>
【讨论】：
您可以简单地在 HTML 中包含一个 Javascript 文件，将您的 JSON 对象声明为变量。然后，您可以使用 data.employees 从全局 Javascript 范围访问您的 JSON 数据，例如。
index.html：
<html>
<head>
</head>
<body>
<script src="data.js"></script>
</body>
</html>
data.js：
var data = {
"employees": [{
"firstName": "Anna",
"lastName": "Meyers"
}, {
"firstName": "Betty",
"lastName": "Layers"
}, {
"firstName": "Carl",
"lastName": "Louis"
}]
}
【讨论】：
您的 JSON 文件不包含有效的 JSON。请尝试以下方法。
{
"employees":
[
{
"firstName": "Anna",
"lastName": "Meyers"
},
{
"firstName": "Betty",
"lastName": "Layers"
},
{
"firstName": "Carl",
"lastName": "Louis"
}
]
}
然后您应该会看到响应。查看http://jsonlint.com/
【讨论】：
在 jQuery 代码中，您应该有 employees 属性。
data.employees[0].firstName
所以应该是这样的。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$.getJSON("names.json", function(data) {
console.log(data);
$('body').append(data.employees[0].firstName);
});
</script>
</body>
</html>
当然，非 jQuery 版本也需要该属性，但您需要先解析 JSON 响应。
还请记住，document.write 正在破坏您的整个页面。
如果您仍然遇到问题，请尝试完整的 $.ajax 请求，而不是 $.getJSON 包装器。
$.ajax({
url: "names.json",
dataType: "json",
success: function(data) {
console.log(data);
$('body').append(data.employees[0].firstName);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log('ERROR', textStatus, errorThrown);
}
});
【讨论】：
如果你想使用 PHP。
<?php
$contents = file_get_contents('names.json');
?>
<script>
var names = <?php echo $contents; ?>
var obj = JSON.parse(names);
//use obj
</script>
可选地，异步使用它：
<script>
$(document).ready(function(){
$.get("get_json.php?file=names",function(obj){
//use obj here
},'json');
});
</script>
PHP：
<?php
$filename = $_GET['file'] . '.json';
$data['contents'] = file_get_contents($filename);
echo json_encode($data);
?>
【讨论】：
names 解析为 json obj。这不像将 json 编码为... double json
我知道答案是很久以前给出的，但这个结果在谷歌上显示在第一位。
但是我不想使用 jquery，所以在 vanilla JS 中，I found this quick tutorial 比 senornestor 答案更干净（它还允许根据变量加载文件）：
function loadJSON(filelocation, callback) {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', filelocation, true); // Replace 'my_data' with the path to your file
xobj.onreadystatechange = function () {
if (xobj.readyState == 4 && xobj.status == "200") {
// Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
callback(xobj.responseText);
}
};
xobj.send(null);
}
function init() {
var location = "myfile.json";
loadJSON(filelocation=location, function(response) {
// Parse JSON string into object
loadedJSON = JSON.parse(response);
console.log(loadedJSON.somethingsomething);
});
}
init();
在你的 html 文件上：
`<script src="myscript.js"></script>`
【讨论】：
JQuery 倒闭后谷歌发到这里的，用Fetch API
fetch("test.json").then(async (resp) => {
const asObject = await resp.json();
console.log(asObject);
})
【讨论】：