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

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

根据您的评论，您希望使用纯JSON文件作为JSFIDLE中的外部资源。您不能这样做，因为纯JSON不是JavaScript。假设您尝试包含

http://example.com/foo.json

作为外部资源，该文件包含以下内容：

{"foo":"bar"}

这将导致

未捕获的语法错误：意外标记：

，因为JSON对象本身不是有效的JavaScript

但如果将JSON对象分配给变量，如下所示：

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

那没问题

---

解决方案：使用文件的修改版本初始化一个变量，以便在JSFIDLE中使用。

您可以利用的功能来完成任务

CORS的基本工作原理是，如果在HTTP响应中设置了

Access-Control-Allow-Orign

头，那么AJAX加载的内容就可以在脚本中使用，而不管它在同一个域或其他域上

现在，出于您的目的，您可以将本地JSON文件上传到Dropbox的

Public

文件夹，并获得一个公共URL，您可以通过一个简单的AJAX调用加载该URL

在这种情况下，AJAX调用将成功，因为Dropbox在响应

访问控制允许Orign:

中设置以下值，这意味着任何域都可以使用加载的内容

Jquery代码将是这样的（如果愿意，您甚至可以使用纯JavaScript）

提供在中运行的api

:

:

---

添加JSON文件是什么意思？就像在JSFIDLE外部源代码中一样，我们可以添加指向外部css anh js的链接。类似地，我随身携带的json文件中也有添加链接的方法，这非常完美。很简单。2012年10月4日之后创建的Dropbox帐户不再具有公用文件夹。Dropbox现在提供的用于共享内容的链接不起作用。有什么建议吗？

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

    }
});

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

    }
});

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

        }
    });
});