如何从XmlHttpRequest.responseJSON解析JSON?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (260)

我试图在javscript中解析bit.ly JSON响应。

我通过XMLHttpRequest获得JSON。

var req = new XMLHttpRequest;  
req.overrideMimeType("application/json");  
req.open('GET', BITLY_CREATE_API + encodeURIComponent(url)
          + BITLY_API_LOGIN, true);  
var target = this;  
req.onload  = function() {target.parseJSON(req, url)};  
req.send(null);

parseJSON: function(req, url) {  
if (req.status == 200) {  
    var jsonResponse = req.responseJSON;  
    var bitlyUrl = jsonResponse.results[url].shortUrl;  
}

我是在Firefox的一个插件中这样做的。当我运行时,我得到行的错误"jsonResponse is undefined" ,如何解决?

提问于
用户回答回答于

方法一:fetch

fetch(url)
  .then(function(response) {
    return response.json();
  })
  .then(function(jsonResponse) {
    // do something with jsonResponse
  });

方法二:responseType

var req = new XMLHttpRequest();
req.responseType = 'json';
req.open('GET', url, true);
req.onload  = function() {
   var jsonResponse = req.response;
   // do something with jsonResponse
};
req.send(null);

经典方式

标准XMLHttpRequest没有responseJSON财产,只是responseTextresponseXML...。只要BITLY真的用一些JSON来响应您的请求,responseText应该以文本形式包含JSON代码,所以您所要做的就是用JSON.parse():

var req = new XMLHttpRequest();
req.overrideMimeType("application/json");
req.open('GET', url, true);
req.onload  = function() {
   var jsonResponse = JSON.parse(req.responseText);
   // do something with jsonResponse
};
req.send(null);

JSONHttpRequest

如果你喜欢用responseJSON,但是想要一个比JQuery更轻量级的解决方案,您可能需要查看我的JSONHttpRequest。它的工作原理与普通XMLHttpRequest完全一样,但同时也提供了responseJSON属性。在代码中只需更改第一行:

var req = new JSONHttpRequest();

JSONHttpRequest还提供了将JavaScript对象轻松地作为JSON发送的功能。

用户回答回答于

你可以简单地设置xhr.responseType = 'json';

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1');
xhr.responseType = 'json';
xhr.onload = function(e) {
  if (this.status == 200) {
    console.log('response', this.response); // JSON response  
  }
};
xhr.send();

扫码关注云+社区