Question

我一直在搜索并且没有找到关于使用JavaScript和/或PHP导入JSON文件（在同一服务器/目录上）的全面教程或解释。我知道使用库更好，但我想知道如何在没有它的情况下这样做。

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

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

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

Answer 1

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

var myData = <?php echo file_get_contents('path/to/file.json'); ?>;

// 2
console.log(myData.customers.length);

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

Answer 2

假设您想要动态获取数据，您可以使用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，因此您可能需要一个垫片。你可以在Douglas Crockford's github page找到几个。但同样，一个像样的图书馆会为你处理。

使用javascript（不是JQuery）导入JSON文件

2 个答案: