使用javascript(不是JQuery)导入JSON文件 - Import JSON file with javascript (not JQuery)

Import JSON file with javascript (not JQuery)

我已经搜索过了，还没有找到一个全面的教程或解释导入JSON文件(在同一服务器/目录)，只有JavaScript和/或PHP。我知道使用库更好，但我想知道不使用库怎么做。

假设我在.json文件中有以下内容

{
   "customers":[
   {"name":"Joe Smith","age":"36"},
   {"name":"Jane Doe","age":"27"}
   ]
}

我如何有效地将其拉入脚本并使用其数据?

不使用Ajax的一种简单方法是将文件的内容从PHP回显到javascript变量中，如下所示。因为JSON使用与Javascript中对象相同的结构，所以您可以直接将数据用作变量。

var myData = <?php echo file_get_contents('path/to/file.json'); ?>;
// 2
console.log(myData.customers.length);

注意，这是假设数据是有效的JSON。此外，请确保文件的源是可信的，因为它可以执行文档上下文中的任何内容。

假设您想动态抓取数据，您将使用XMLHttpRequest(请求文本)和JSON.parse(解析文本)的组合。

function getData(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open(url);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            if (xhr.status == 200) {
                callback(JSON.parse(xhr.responseText));
            }
            else {
                callback(null); // Or something to indicate failure
            }
        }
    };
    xhr.send();
}
// usage
getData("/path/to/your/file", function(data) {
    if (data === null) {
        // Handle the error
    }
    else {
        // Use `data` here
    }
});

现在轮到库了:

一些旧的浏览器不支持new XMLHttpRequest，并且要求您以各种不同的方式创建XHR对象。一个库可以帮你处理这些
一些旧的(并不是那么旧的)浏览器不支持JSON.parse原生，所以你可能需要一个shim。你可以在Douglas Crockford的github页面上找到一些。但是，同样，一个不错的库将为您处理。