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

Question

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

Answer 1

Myjson.com提供在Jsfiddle.net上运行的api.

定制我的myjson:

// 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示例:

// 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

您可以利用跨源资源共享(CORS)的强大功能来完成您的任务.

基本上CORS的工作原理是,如果Access-Control-Allow-Orign在HTTP响应中设置了头,那么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);

    }
});

示例JSFiddle