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

Question

如何在jsfiddle中添加JSON文件？我有一个JSON文件，但无法将其附加到jsfiddle中。我可以制作一个JSON对象并使用它，但是有什么方法可以将外部JSON文件添加到小提琴中？

Answer 1

您可以利用跨域资源共享（CORS）的功能来完成您的任务。

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

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

在这种情况下，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