如何从 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中文网其他相关文章！