我试图加载一个本地JSON文件，但它不会工作。下面是我的JavaScript代码(使用jQuery):
var json = $.getJSON("test.json");
var data = eval("(" +json.responseText + ")");
document.write(data["a"]);
测试。json文件:
{"a" : "b", "c" : "d"}
什么也没有显示，Firebug告诉我数据是未定义的。在Firebug中我可以看到json。responseText和它是好的和有效的，但它是奇怪的，当我复制一行:
var data = eval("(" +json.responseText + ")");
在Firebug的控制台中，它可以工作，我可以访问数据。
有人有办法吗?
当前回答
An approach I like to use is to pad/wrap the json with an object literal, and then save the file with a .jsonp file extension. This method also leaves your original json file (test.json) unaltered, as you will be working with the new jsonp file (test.jsonp) instead. The name on the wrapper can be anything, but it does need to be the same name as the callback function you use to process the jsonp. I'll use your test.json posted as an example to show the jsonp wrapper addition for the 'test.jsonp' file.
json_callback({"a" : "b", "c" : "d"});
接下来，在脚本中创建一个具有全局作用域的可重用变量，以保存返回的JSON。这将使返回的JSON数据可用于脚本中的所有其他函数，而不仅仅是回调函数。
var myJSON;
接下来是一个通过脚本注入检索json的简单函数。注意，我们不能在这里使用jQuery将脚本附加到文档头部，因为IE不支持jQuery .append方法。下面代码中注释掉的jQuery方法可以在其他支持.append方法的浏览器上运行。这是作为一个参考，以显示差异。
function getLocalJSON(json_url){
var json_script = document.createElement('script');
json_script.type = 'text/javascript';
json_script.src = json_url;
json_script.id = 'json_script';
document.getElementsByTagName('head')[0].appendChild(json_script);
// $('head')[0].append(json_script); DOES NOT WORK in IE (.append method not supported)
}
接下来是一个简短的回调函数(与jsonp包装器同名)，用于将json结果数据获取到全局变量中。
function json_callback(response){
myJSON = response; // Clone response JSON to myJSON object
$('#json_script').remove(); // Remove json_script from the document
}
json数据现在可以被脚本的任何函数使用点表示法访问。举个例子:
console.log(myJSON.a); // Outputs 'b' to console
console.log(myJSON.c); // Outputs 'd' to console
这种方法可能与你习惯看到的有点不同，但有很多优点。首先，可以使用相同的函数在本地或从服务器加载相同的jsonp文件。作为奖励，jsonp已经是跨域友好的格式，也可以很容易地与REST类型API一起使用。
当然，没有错误处理函数，但为什么需要呢?如果您无法使用此方法获得json数据，那么您几乎可以打赌json本身存在一些问题，我会在一个好的json验证器上检查它。
其他回答
如果您想让用户选择本地json文件(文件系统上的任何位置)，那么下面的解决方案是可行的。
它使用FileReader和JSON。解析器(没有jquery)。
<html>
<body>
<form id="jsonFile" name="jsonFile" enctype="multipart/form-data" method="post">
<fieldset>
<h2>Json File</h2>
<input type='file' id='fileinput'>
<input type='button' id='btnLoad' value='Load' onclick='loadFile();'>
</fieldset>
</form>
<script type="text/javascript">
function loadFile() {
var input, file, fr;
if (typeof window.FileReader !== 'function') {
alert("The file API isn't supported on this browser yet.");
return;
}
input = document.getElementById('fileinput');
if (!input) {
alert("Um, couldn't find the fileinput element.");
}
else if (!input.files) {
alert("This browser doesn't seem to support the `files` property of file inputs.");
}
else if (!input.files[0]) {
alert("Please select a file before clicking 'Load'");
}
else {
file = input.files[0];
fr = new FileReader();
fr.onload = receivedText;
fr.readAsText(file);
}
function receivedText(e) {
let lines = e.target.result;
var newArr = JSON.parse(lines);
}
}
</script>
</body>
</html>
这里有一个很好的FileReader介绍:http://www.html5rocks.com/en/tutorials/file/dndfiles/
我如何能够加载数据从json文件在一个JavaScript变量使用简单的JavaScript:
let mydata;
fetch('datafile.json')
.then(response => response.json())
.then(jsonResponse => mydata = jsonResponse)
在这里发帖是因为我没有找到我正在寻找的这种“解决方案”。
注意:我使用的是通过通常的“python -m http”运行的本地服务器。服务器”命令。
function readTextFile(srcfile) {
try { //this is for IE
var fso = new ActiveXObject("Scripting.FileSystemObject");;
if (fso.FileExists(srcfile)) {
var fileReader = fso.OpenTextFile(srcfile, 1);
var line = fileReader.ReadLine();
var jsonOutput = JSON.parse(line);
}
} catch (e) {
}
}
readTextFile("C:\\Users\\someuser\\json.txt");
我所做的是，首先，从network选项卡，记录服务的网络流量，从响应体，复制并保存json对象到本地文件中。然后用本地文件名调用函数，你应该能够在上面的jsonOutout中看到json对象。
如何使用XMLHttpRequest加载本地json文件
ES5版本
// required use of an anonymous callback, // as .open() will NOT return a value but simply returns undefined in asynchronous mode! function loadJSON(callback) { var xObj = new XMLHttpRequest(); xObj.overrideMimeType("application/json"); xObj.open('GET', './data.json', true); // 1. replace './data.json' with the local path of your file xObj.onreadystatechange = function() { if (xObj.readyState === 4 && xObj.status === 200) { // 2. call your callback function callback(xObj.responseText); } }; xObj.send(null); } function init() { loadJSON(function(response) { // 3. parse JSON string into JSON Object console.log('response =', response); var json = JSON.parse(response); console.log('your local JSON =', JSON.stringify(json, null, 4)); // 4. render to your page const app = document.querySelector('#app'); app.innerHTML = '<pre>' + JSON.stringify(json, null, 4) + '</pre>'; }); } init(); <section id="app"> loading... </section>
ES6版本
// required use of an anonymous callback, // as .open() will NOT return a value but simply returns undefined in asynchronous mode! const loadJSON = (callback) => { const xObj = new XMLHttpRequest(); xObj.overrideMimeType("application/json"); // 1. replace './data.json' with the local path of your file xObj.open('GET', './data.json', true); xObj.onreadystatechange = () => { if (xObj.readyState === 4 && xObj.status === 200) { // 2. call your callback function callback(xObj.responseText); } }; xObj.send(null); } const init = () => { loadJSON((response) => { // 3. parse JSON string into JSON Object console.log('response =', response); const json = JSON.parse(response); console.log('your local JSON =', JSON.stringify(json, null, 4)); // 4. render to your page const app = document.querySelector('#app'); app.innerHTML = `<pre>${JSON.stringify(json, null, 4)}</pre>`; }); } init(); <section id="app"> loading... </section>
在线演示
https://cdn.xgqfrms.xyz/ajax/XMLHttpRequest/index.html
在尝试(不成功)加载本地json文件时发现此线程。这个方法对我很有效。
function load_json(src) {
var head = document.getElementsByTagName('head')[0];
//use class, as we can't reference by id
var element = head.getElementsByClassName("json")[0];
try {
element.parentNode.removeChild(element);
} catch (e) {
//
}
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = src;
script.className = "json";
script.async = false;
head.appendChild(script);
//call the postload function after a slight delay to allow the json to load
window.setTimeout(postloadfunction, 100)
}
．.． And的用法是这样的…
load_json("test2.html.js")
.．.这是<head>…
<head>
<script type="text/javascript" src="test.html.js" class="json"></script>
</head>
