Link JSFiddle 中的外部 JSON 数据文件

Question

有没有办法在 JSFiddle 中 link 外部 JSON 数据？

我试图拉入 JSON 数据的代码部分如下：

var xhr = new XMLHttpRequest();

xhr.open('GET', url: 'www.myurl.com/js/data/data.json', true);
xhr.send(null);

我看到 JSON 数据放在 javascript section/internally 放在 JSFiddle 中，但我很好奇是否可以拉入 JSON 数据在 JSFiddle 中外部使用它的 url 路径。

查看当前JSFiddle.

Answer 1

您的示例（包括 fiddle 中的代码）已损坏。

你用这个 isstead 修复它：

xhr.open('GET', 'http://www.andrewwierzba.com/js/data/data.json', true);

然而，你碰壁了：

XMLHttpRequest cannot load http://www.andrewwierzba.com/js/data/data.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.

How to fix that is for another question 并且网上有很多关于跨源 XHR 的讨论，因此请尝试查找它。这很痛苦，这就是为什么大多数人改为嵌入 json。

更好的主意可能是使用 "echo" 功能，正如@citrus 在对原始 post.

的评论中提到的那样

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/ 请求的参数。

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

Link JSFiddle 中的外部 JSON 数据文件

Link An External JSON Data File In JSFiddle

javascript

jquery

json

jsfiddle