如何從 JavaScript 中的 JSON 回應中提取資料？-js教程-PHP中文網

如何從 JavaScript 中的 JSON 回應中提取資料？

Barbara Streisand

發布： 2024-10-28 03:32:02

原創

518 人瀏覽過

How to extract data from a JSON response in JavaScript?

如何從 JavaScript 中的 URL 解析 JSON 回應

許多 Web 服務以 JSON 格式提供回應，使它們可以輕鬆地與 JavaScript 應用程式整合。但是，從 JSON 回應存取資料對於初學者來說可能具有挑戰性。

考慮以下範例URL：

http://query.yahooapis.com/v1/publ...

登入後複製

此URL 傳回結構如下的JSON 回應：

{
  query: {
    count: 1,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US",
    diagnostics: {},
    ...
  }
}

登入後複製

要解析此JSON 回應並建立JavaScript 物件，可以使用多種選項。

使用 jQuery 的 .getJSON() 函數

jQuery 提供了一個名為 .getJSON() 的便利函數來進行取得來自 URL 的 JSON 資料。透過指定 URL 和回呼函數，您可以處理回應：

$.getJSON('http://query.yahooapis.com/v1/public/yql?q=select%20%2a%20from%20yahoo.finance.quotes%20WHERE%20symbol%3D%27WRC%27&amp;format=json&amp;diagnostics=true&amp;env=store://datatables.org/alltableswithkeys&amp;callback', function(data) {
    // JSON result in `data` variable
});

登入後複製

使用純 JavaScript

jQuery 的替代方法是使用純 JavaScript 來處理 JSON 回應。 XMLHttpRequest 物件可用來向 URL 發出 GET 請求：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://query.yahooapis.com/v1/public/yql?q=select%20%2a%20from%20yahoo.finance.quotes%20WHERE%20symbol%3D%27WRC%27&amp;format=json&amp;diagnostics=true&amp;env=store://datatables.org/alltableswithkeys');
xhr.send();

xhr.onload = function() {
    if (xhr.status == 200) {
        var responseObj = JSON.parse(xhr.responseText);
        // JSON result in `responseObj` variable
    }
};

登入後複製

以上是如何從 JavaScript 中的 JSON 回應中提取資料？的詳細內容。更多資訊請關注PHP中文網其他相關文章！