javascript 如何在jsfiddle中添加本地json文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24911126/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add local json file in jsfiddle?
提问by Roshan
How can I add a JSON file in jsfiddle? I have a JSON file but I am not able to attach it in jsfiddle. I can make a JSON object and use it, but is there any way to add an external JSON file to a fiddle?
如何在 jsfiddle 中添加 JSON 文件？我有一个 JSON 文件，但我无法在 jsfiddle 中附加它。我可以创建一个 JSON 对象并使用它，但是有没有办法将外部 JSON 文件添加到小提琴中？
采纳答案by Shiva
You can harness the power of Cross-Origin Resource Sharing (CORS)to achieve your task.
您可以利用跨域资源共享 (CORS)的力量来完成您的任务。
Basically how CORS works is that if the Access-Control-Allow-Orignheader is set in the HTTP response, then the content loaded by AJAX can be used in our script regardless of the fact it is on the same domain or some other.
基本上，CORS 的工作原理是，如果Access-Control-Allow-Orign在 HTTP 响应中设置了标头，那么 AJAX 加载的内容可以在我们的脚本中使用，而不管它是在同一个域中还是在其他域中。
Now for your purpose, you can upload your local JSON file to Dropbox's Publicfolder and get a Public URL, that you can load by a simple AJAX call.
现在，出于您的目的，您可以将本地 JSON 文件上传到 Dropbox 的Public文件夹并获取公共 URL，您可以通过简单的 AJAX 调用加载该 URL。
The AJAX call will succeed in this case because Dropbox sets the following value in the response Access-Control-Allow-Orign:*which means any domain can use the loaded content.
在这种情况下，AJAX 调用会成功，因为 Dropbox 在响应中设置了以下值， Access-Control-Allow-Orign:*这意味着任何域都可以使用加载的内容。
Jquery code will be something like this(you can even use pure JavaScript if you prefer ).
Jquery 代码将是这样的（如果您愿意，您甚至可以使用纯 JavaScript）。
var url = 'https://dl.dropboxusercontent.com/u/94145612/example.json';
var myJsonData= {};
$.ajax({
type: 'GET',
url: url,
async: false,
contentType: "application/json",
dataType: 'json',
success: function (data) {
alert('success');
console.log(data);
myJsonData= data;
},
error: function (e) {
alert('error');
console.log(e);
}
});
Example JSFiddle
示例 JSFiddle
回答by jezrael
Myjson.comprovides api, which runs in Jsfiddle.net.
Myjson.com提供了 api，它在Jsfiddle.net中运行。
// Loading JSON with CROS
var url = 'https://api.myjson.com/bins/3ko1q';
$.ajax({
type: 'GET',
url: url,
async: false,
contentType: "application/json",
dataType: 'json',
success: function (data) {
alert('success');
console.log(data);
},
error: function (e) {
alert('error');
console.log(e);
}
});
// 1. Create valid uri via POST
// 2. GET using newly created uri
var obj = {
"key": "value",
"key2": "value2"
};
var data = JSON.stringify(obj);
$("#clickMe").click(function () {
$.ajax({
url: "https://api.myjson.com/bins",
type: "POST",
data: data,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data, textStatus, jqXHR) {
// load created json
$.get(data.uri, function (data, textStatus, jqXHR) {
var json = JSON.stringify(data);
$("#data").val(json);
});
}
});
});
回答by elixenide
Based on your comment, you want to use a pure JSON file as an external resource in a jsFiddle. You can't do this, because pure JSON is not JavaScript. Say you try to include http://example.com/foo.jsonas an external resource, and that file contains the following:
根据您的评论，您希望使用纯 JSON 文件作为 jsFiddle 中的外部资源。你不能这样做，因为纯 JSON 不是 JavaScript。假设您尝试包含http://example.com/foo.json作为外部资源，并且该文件包含以下内容：
{"foo":"bar"}
This will result in Uncaught SyntaxError: Unexpected token :, because the JSON object is not valid JavaScript by itself.
这将导致Uncaught SyntaxError: Unexpected token :，因为 JSON 对象本身不是有效的 JavaScript。
But if you assign the JSON object to a variable, like so:
但是，如果您将 JSON 对象分配给一个变量，如下所示：
var foo = {"foo":"bar"};
then no problem.
那么没问题。
Solution: use a modified version of your file to initialize a variable for use in the jsFiddle.
解决方案：使用文件的修改版本来初始化一个变量以在 jsFiddle 中使用。
