有没有办法在JSFiddle中链接外部JSON数据?
我试图引入JSON数据的代码部分如下:
var xhr = new XMLHttpRequest();
xhr.open('GET', url: 'www.myurl.com/js/data/data.json', true);
xhr.send(null);
我已经看到JSON数据放在javascript部分/内部放置在JSFiddle中,但我很好奇是否可以在JSFiddle中使用它的url路径从外部提取JSON数据。
查看当前的JSFiddle。
答案 0 :(得分:1)
您的示例(包括小提琴中的代码)已损坏。
你可以使用这个来解决它:
xhr.open('GET', 'http://www.andrewwierzba.com/js/data/data.json', true);
然而,然而,你碰到了一堵砖墙:
XMLHttpRequest无法加载 http://www.andrewwierzba.com/js/data/data.json。没有 请求中存在“Access-Control-Allow-Origin”标头 资源。因此不允许来源“http://fiddle.jshell.net” 访问。
如何解决这个问题是另一个问题,网上有很多关于跨源XHR的讨论,所以试着去查一查。这很痛苦,这就是大多数人嵌入json的原因。
更好的想法可能是使用“回声”功能,正如@cirtrus在原帖中的评论中提到的那样。
答案 1 :(得分:0)
您可以使用/ echo / json / URL模拟JSON调用。在您的例子中,您必须是JSON文件的内容
{
"profiles": [
{ "firstName": "Jane", "lastName": "Doe", "gender": "female" },
{ "firstName": "John", "lastName": "Doe", "gender": "male" },
{ "firstName": "Akexander", "lastName": "Beth", "gender": "male" },
{ "firstName": "Sarah", "lastName": "Kelly", "gender": "female" }
{ "firstName": "Rachel", "lastName": "Haiworth", "gender": "female" }
]
}
并将其用作POST / echo / json / request的参数。
var JSONData = {
"profiles": [
{ "firstName": "Jane", "lastName": "Doe", "gender": "female" },
{ "firstName": "John", "lastName": "Doe", "gender": "male" },
{ "firstName": "Akexander", "lastName": "Beth", "gender": "male" },
{ "firstName": "Sarah", "lastName": "Kelly", "gender": "female" }
{ "firstName": "Rachel", "lastName": "Haiworth", "gender": "female" }
]
}
new Request.JSON({
url: '/echo/json/',
data: {
json: JSON.encode(JSONData),
delay: 3
},
onSuccess: function(response) {
// Function to onSucess
}
}).send();