在JSFiddle中链接外部JSON数据文件

时间:2015-01-03 21:51:10

标签: javascript jquery json jsfiddle

有没有办法在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

2 个答案:

答案 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();

请参阅http://doc.jsfiddle.net/use/echo.html