Question

如何在jsfiddle中添加JSON文件？我有一个JSON文件，但我无法在jsfiddle中附加它。我可以创建一个JSON对象并使用它，但有没有办法将外部JSON文件添加到小提琴？

Answer 1

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);

    }
});

Myjson GET Example：

// 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);
            });

        }
    });
});

Answer 2

您可以利用Cross-Origin Resource Sharing (CORS)的力量来完成任务。

基本上CORS的工作原理是，如果在HTTP响应中设置了Access-Control-Allow-Orign标头，那么AJAX加载的内容可以在我们的脚本中使用，无论它是在同一个域还是其他域上。

现在，出于您的目的，您可以将本地JSON文件上传到Dropbox的Public文件夹并获取公共URL，您可以通过简单的AJAX调用加载。

在这种情况下，AJAX调用将成功，因为Dropbox在响应Access-Control-Allow-Orign:*中设置了以下值，这意味着任何域都可以使用加载的内容。

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

Answer 3

根据您的评论，您希望将纯JSON文件用作jsFiddle中的外部资源。你不能这样做，因为纯JSON不是JavaScript。假设您尝试将http://example.com/foo.json包含为外部资源，该文件包含以下内容：

{"foo":"bar"}

这将导致Uncaught SyntaxError: Unexpected token :，因为JSON对象本身不是有效的JavaScript。

但是如果你将JSON对象分配给变量，就像这样：

var foo = {"foo":"bar"};

然后没问题。

解决方案：使用文件的修改版本初始化变量以在jsFiddle中使用。

如何在jsfiddle中添加本地json文件？

3 个答案:

Example JSFiddle