时间戳

首页 > 解决方案 > 如何从单独的域请求 JSON 数据并自己使用它

javascript - 如何从单独的域请求 JSON 数据并自己使用它

问题描述

  1. 我正在尝试使用来自“ https://www.purpleair.com/json?show=13165 ”的 JSON 数据并将数据放在我的网站上。
  2. 我正在尝试访问 JSON 字段名称“Stats”，并且正在尝试获取子字段名称“\“v\””。这是purpleair 提供的文档。https://docs.google.com/document/d/15ijz94dXJ-YAZLi9iZ_RaBwrZ4KtYeCy08goGBwnbCU/edit（第二页）

我的代码是使用 XMLHttpRequest() 编写的。它在W3Schools上说你不能跨域，当我尝试使用 PHP 遵循他们的指示时，我迷路了。我不拥有purpleair.com

<!DOCTYPE html>
<html>
<head>
    <title>Your Page Title</title>
</head>

<body>
    <h1>Hello</h1>
    <p id='demo'></p>
    <script src="jsonp.php">
        function reqListener() {
            var myObj = JSON.parse(this.responseText);
            document.getElementById("demo").innerHTML = myObj.stats
        }
        function loadData() {
            var oReq = new XMLHttpRequest();
            oReq.addEventListener("load", reqListener);
            oReq.open("GET", "https://www.purpleair.com/json?show=13165");
            oReq.send();
        }
        loadData()
    </script>
</body>
</html>

标签： javascriptphphtmljson

解决方案

您可以像这样从 PurpelAir 获取 JSON：

function reqListener() {
  // parse the the data
  var data = JSON.parse(this.responseText)
  // create an array from the required data (result.Stats -> watch the capital 'S')
  var mappedData = data.results.map(item => item.Stats)
  // display data
  document.getElementById('demo').innerHTML = mappedData.join()
}

function loadData() {
  var oReq = new XMLHttpRequest();
  oReq.addEventListener("load", reqListener);
  oReq.open("GET", "https://www.purpleair.com/json?show=13165");
  oReq.send();
}

loadData()
<h1>Hello</h1>
<p id="demo"></p>

有关 XMLHttpRequest 的更多信息：https ://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

我在下面修改了您的代码： 

<!DOCTYPE html>
<html>

<head>
  <title>Your Page Title</title>
</head>

<body>
  <h1>Hello</h1>
  <!-- make ' to " in the ID-->
  <p id="demo"></p>
  <!-- no src for the script -->
  <script>
    function reqListener() {
      var myObj = JSON.parse(this.responseText);
      // this myObj.stats doesn't exist (try console.log(myObj))
      document.getElementById("demo").innerHTML = myObj.stats
      // instead try this:
      document.getElementById("demo").innerHTML = myObj.results.map(item => item.Stats).join()
    }

    function loadData() {
      var oReq = new XMLHttpRequest();
      oReq.addEventListener("load", reqListener);
      oReq.open("GET", "https://www.purpleair.com/json?show=13165");
      oReq.send();
    }
    loadData()
  </script>
</body>

</html>

推荐阅读