如何从 JavaScript 中的 URL 获取 JSON？

IT技术 javascript json
2021-01-25 15:42:10

此 URL返回 JSON：

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

我试过这个，但没有用：

responseObj = readJsonFromUrl('http://query.yahooapis.com/v1/publ...');
var count = responseObj.query.count;

console.log(count) // should be 1

如何从此 URL 的 JSON 响应中获取 JavaScript 对象？

6个回答

您可以使用 jQuery.getJSON()函数：

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

如果你不想使用 jQuery，你应该看看这个纯 JS 解决方案的答案：https : //stackoverflow.com/a/2499647/1361042

次要问题，但如果声明“JSON 在data变量中”可能会更清楚
2021-03-22 15:42:10
它对我来说是第一次尝试。那永远不会发生！
2021-04-01 15:42:10
您指向的纯 JavaScript 示例适用于 JSONP，它不适用于该问题。
2021-04-05 15:42:10

如果你想用普通的 javascript 来做，你可以定义一个这样的函数：

var getJSON = function(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'json';
    xhr.onload = function() {
      var status = xhr.status;
      if (status === 200) {
        callback(null, xhr.response);
      } else {
        callback(status, xhr.response);
      }
    };
    xhr.send();
};

并像这样使用它：

getJSON('http://query.yahooapis.com/v1/public/yql?q=select%20%2a%20from%20yahoo.finance.quotes%20WHERE%20symbol%3D%27WRC%27&format=json&diagnostics=true&env=store://datatables.org/alltableswithkeys&callback',
function(err, data) {
  if (err !== null) {
    alert('Something went wrong: ' + err);
  } else {
    alert('Your query count: ' + data.query.count);
  }
});

请注意，这data是一个对象，因此您可以访问其属性而无需解析它。

@hrushi 如果它们未定义，则您以错误的方式或在错误的上下文中访问它们。请记住，您必须使用 xhr.responseText 和 xhr.responseXML 并且它们仅在 getJSON 函数定义块中可用，而不能在其外部使用。
2021-03-18 15:42:10
@MitchellD 你在使用 Node.js 吗？那就来这边看看吧。但是下次尝试先在谷歌上搜索错误，我发布的链接是我在谷歌中输入错误时出现的第一个结果。
2021-03-21 15:42:10
@MikeySkullivan 我想知道一件事，为什么我得到 responseText 和 responseXML 为 undefined 尽管响应状态 = 200？
2021-04-02 15:42:10
根据这篇文章，它不仅更短，而且似乎更可靠一些。而且caniuse.com说除了IE8 都支持，所以只要你不需要支持IE8，我不明白你为什么不使用onload。
2021-04-04 15:42:10
为什么.onload = function() {在你可以使用的时候使用.onreadystatechange = function() { if (xhr.readState === 4) {我的意思是，它更短，但你牺牲了大量的支持来保存几个字符。这不是代码高尔夫
2021-04-10 15:42:10

借助 Chrome、Firefox、Safari、Edge 和 Webview，您可以在本机使用 fetch API，这使这变得更容易，也更简洁。

如果您需要支持 IE 或更旧的浏览器，您还可以使用fetch polyfill。

let url = 'https://example.com';

fetch(url)
.then(res => res.json())
.then(out =>
  console.log('Checkout this JSON! ', out))
.catch(err => throw err);

MDN：获取 API

即使 Node.js 没有内置此方法，您也可以使用node-fetch来实现完全相同的实现。

@dano 这是箭头函数。使用常规函数或 Babel 进行转译
2021-03-13 15:42:10
@Phil 感谢您指出 ES6。IE11 最大的问题是 fetch 不是支持的 API：developer.mozilla.org/en-US/docs/Web/API/Fetch_API 还应该知道 IE11 所需的 fetch polyfill 是纯粹的 ES5（由于缺乏支持），因此除非您绝对需要，否则实际上不需要 ES6 转译。如果添加它的唯一原因是支持 fetch idiom（如果 polyfill 甚至支持它），使用 babel-polyfill 是更好的选择。祝你好运！
2021-03-16 15:42:10
你总是可以使用 github/fetch polyfill 来解决这个问题。
2021-03-19 15:42:10
呃.. 这甚至不能在 IE11 中编译。为什么IE这么垃圾？
2021-03-24 15:42:10

ES8(2017) 尝试

obj = await (await fetch(url)).json();

Show code snippet

你可以通过 try-catch 处理错误

Show code snippet

这看起来真的很好。这与其他方法相比如何？
2021-03-12 15:42:10

Axios是用于浏览器和 node.js 的基于Promise的 HTTP 客户端。

它为 JSON 数据提供自动转换，这是Vue.js 团队在从默认包含 REST 客户端的 1.0 版本迁移时的官方建议。

执行GET请求

// Make a request for a user with a given ID
axios.get('http://query.yahooapis.com/v1/publ...')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

或者甚至就axios(url)足够了，因为GET请求是默认的。

其它你可能感兴趣的问题
上一篇React 不会加载本地图片 下一篇如何将整个文档 HTML 作为字符串获取？