一尘不染

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

json

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


阅读 300

收藏
2020-07-27

共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

2020-07-27