Question

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

Answer 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在原帖中的评论中提到的那样。

Answer 2

您可以使用/ 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

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

2 个答案: