用javascript读取本地JSON文件



我需要从本地文件系统加载json。这是我尝试过的:

index.htlm:

<html>
<head>
<title>JSON File Locally by Javascript Without JQuery</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body onload="loadJSON()">
Load JSON File Locally by Javascript Without JQuery
</body>
</html>

script.js:

function loadJSON(callback) {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', 'employee.json', true);
xobj.onreadystatechange = function () {
if (xobj.readyState == 4 && xobj.status == "200") {
callback(xobj.responseText);
}
}
xobj.send(null);
}
loadJSON(function(response) {
jsonresponse = JSON.parse(response);
console.log(jsonresponse[0].name);
});

employee.json:

[{"name" : "Harry", "age" : "32"}]

但是console.log输出中没有任何内容不能读取。我尝试了XMLHttpRequest()函数,但很快意识到它只适用于基于web的json文件。如有任何帮助,不胜感激。

您所要求的根本是不可能的—浏览器出于安全原因不允许javascript访问文件系统。您需要通过HTTPS(通过后端服务器)提供文件,或者采用不同的方法来解决整个问题。

我想你的"本地文件系统"是指像xampp这样的本地安装服务器!?在这种情况下,-也许你喜欢保持简单:


<script>

window.onload = function(){
function loadJson(){

const xobj = new XMLHttpRequest();
xobj.open('POST', 'employee.json');
xobj.onreadystatechange = function () {
if (xobj.readyState == 4 && xobj.status == "200") {

let data = xobj.responseText;
data = JSON.parse(data);
console.log(data[0]['name']);
}
}//xobj.onreadystatechange
xobj.send(null);
}

loadJson();
}

</script>

最新更新