Question

我正在编写我的第一个Web应用程序，为了一个简单的挑战，我想为用户显示一些Overwatch统计信息。我能够在我制作的一些机器人中使用NodeJS完成此操作，但我现在无法使用NodeJS。我知道如果我在本地拥有JSON，我可以像这样访问它：

stats =  {
  name: "This",
  lastName: "That"
}

document.getElementById("overwatchStats").innerHTML = stats.name;

但此JSON数据来自https://owapi.net/api/v3/u/Calvin-1337/stats。所以我不确定如何像这样访问它（没有jquery会是首选，但如果它不可能/复杂我将使用它。）

Answer 1

我不确定这会起作用，但似乎是这样。只需使用XMLHttpRequest和JSON.parse获取数据，将结果放入数组中。

我已更新它以循环对象并将它们输出到div，以便举例说明如何做到这一点。

var statsButton = document.getElementById('get-stats');
statsButton.addEventListener('click', function()
  {
    var url = 'https://owapi.net/api/v3/u/Calvin-1337/stats';
    GetContent(url);
  }, false);

function GetContent(url, response)
{
    var responseContainer = document.getElementById('response-div');
    
    if (typeof response === 'undefined') {      
      xmlhttp = new XMLHttpRequest();
      xmlhttp.open("GET", url, true);

      xmlhttp.onreadystatechange = function()
      {
          //when new content is ready check if animation is still occuring,
          //if it is, add an event listener, otherwise replace content
          if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
          {
              GetContent(url, xmlhttp.responseText);
          }
      };

      xmlhttp.timeout = 10000;
      
      xmlhttp.ontimeout = function()
      {
          responseContainer.innerHTML = 'Request timed out.';
          xmlhttp.abort();
      };

      xmlhttp.send();
    } else {
        var decodedResponse = JSON.parse(response);
        var content = processResponse(decodedResponse, 0);
        responseContainer.innerHTML = content;
    }
}

function processResponse(response, tab)
{
  var newHTML = '';
  if (typeof response === 'object') {
    for (var property in response) {
      if (response.hasOwnProperty(property)) {
        newHTML += '<div>' + addTab(tab) + property + ': ' + 
          processResponse(response[property], + (tab + 1)) + '</div>';
      }
    }
  } else {
    newHTML = response; 
  }

  return newHTML;
}

function addTab(count) {
  var tabs = '';
  for (var i = 0; i < count; i++) {
    tabs += '&nbsp&nbsp';
  }

  return tabs;
}

<div id="response-div">
</div>
<input type="button" value="Get Stats" id="get-stats">

Answer 2

您可能正在寻找名为XMLHttpRequest或XHR的内容。 MDN上有一个教程here。

基本上，这就是你想要做的事情

//Define a variable
var xhr = new XMLHttpRequest();
//Add a callback
xhr.onload = function () {
    //The JSON will be stored as a string in the response property of the XHR
    var json = JSON.parse(xhr.response);
}
//Open a connection to the API using a GET request
xhr.open("GET", "https://owapi.net/api/v3/u/Calvin-1337/stats");
//Perform the request
xhr.send();

使用Javascript访问API

2 个答案: