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

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的github頁面上找到幾個。 但是，同樣，一個體面的圖書館將為您處理。