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

我搜索了所有地方，没有找到关于在同一服务器/目录上仅使用JavaScript和/或PHP导入JSON文件的全面教程或解释。我知道使用图书馆更好，但我想知道没有图书馆怎么做

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

---

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

一种不使用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
    }
});

现在，图书馆的作用是：

一些旧的浏览器不支持新的XMLHttpRequest，并要求您以各种不同的方式创建XHR对象。图书馆会帮你解决这些问题

一些较旧的浏览器还不支持JSON.parse，因此您可能需要一个垫片。你可以在网上找到几个。不过，一个像样的图书馆会帮你解决这个问题

---

您是服务器端还是客户端？基本上，您需要做的就是获取JSON本身，然后对其进行解析：这个.JSON文件存储在哪里？在客户端，本地文件是什么意思？您需要JSON库将JSON转换为javascript对象，否则您必须对此进行不安全的评估如果这是客户端机器的本地文件，答案是，您不能包含客户端本地文件。+1，但您应该警告，这仅对受信任且正确的json文件有效。是的，应该假定为。我将把它作为一个注释添加到答案中。我喜欢这个答案比AJAX方法好得多。它避免了各种浏览器等带来的所有令人不快的复杂性。这是一个很好的答案。不知道为什么我以前没想到。在这种情况下，仅仅创建一个常规的旧文本文件和一个JSON文件之间的主要区别是什么？看起来不是这样的。json与.txt相对应是非常必要的。我能想到的唯一原因是，如果要在浏览器中加载，客户端假定的内容配置类型。例如，如果使用jQuery，默认情况下它将以对象的形式返回数据。最终，它对数据的表示方式没有影响，尤其是使用这种方法。

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