从 OpenWeatherMap.org 获取天气数据并输入 Javascript 值答案

【问题标题】：Fetch Weather Data from OpenWeatherMap.org and put in Javascript Value从 OpenWeatherMap.org 获取天气数据并输入 Javascript 值
【发布时间】：2016-07-15 16:44:02
【问题描述】：

过去一周我一直在努力了解 OpenWeatherMap API (link)，但我目前无法将温度输入 JavaScript 变量。我使用过很多教程，但我还没有找到将温度值放入 JavaScript 变量的教程。

如果你们想知道，这就是 API 的结构：

http://api.openweathermap.org/data/2.5/weather?q=London&APPID=YourAPIKEY&units=metric

我目前有这个代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My Weather App</title>
    <script src="weatherapp.js" type="text/javascript"></script>

    <style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
  </head>
  <body>

    <script>
var weather;

loadJSON ('http://api.openweathermap.org/data/2.5/weather?q=London&APPID=YOURDATA', gotData);

function gotData(data) {
  weather = data;
  window.alert(weather.main.temperature);
}

</script>
  </body>
</html>

提前致谢，瑞奇

【问题讨论】：

你的 window.alert 函数——它有效吗？你看到那里有温度吗？如果是这样，您可以分配一个变量，例如var temperature = weather.main.temperature;
嘿@GridTrekkor，感谢您的回复。我试过了，它仍然没有用。我认为这可能是loadJSON ('http://api.openweathermap.org/data/2.5/weather?q=London&APPID=YOURDATA', gotData); 的问题？
删除 YOURDATA 并替换为您的 API 密钥。
@GridTrekkor，我只是不想让任何人知道我的 API 密钥。
您的提醒功能正常吗？

标签： javascript html json openweathermap

【解决方案1】：

我找到了一个使用 wunderground API 的解决方案。它是天气网络的 API。以下是接受用户输入并返回位置、温度、湿度和风速的代码。 Javascript：

var weather = new XMLHttpRequest();
var city = "London";
var prov = "GB";
function testFunction (){
  var city = document.getElementById("city").value;
  var prov = document.getElementById("state").value;
  weather.open("GET", "http://api.wunderground.com/api/YOURAPIID/conditions/q/" + prov + "/" + city + ".json", false);
  weather.send(null);
  var r = JSON.parse(weather.response);

  var dis = "Current location: " + r.current_observation.display_location.full + "  <p>";
  var temp = r.current_observation.temp_c + "  <p>";
  var wind = r.current_observation.wind_string + "  <p>";
  var humid = r.current_observation.relative_humidity +"   <p>";
  function getWeather(id, res) {
    document.getElementById(id).innerHTML = res;
  }

  getWeather("weather", dis);
  getWeather("temp", temp);
  getWeather("wind", wind);
  getWeather("humid", humid);
 //alert ('gey')
}
  
CSS:

body {
  font-family: sans-serif;
  width: 800px;
  font-size: 3em;
  margin: auto;
}

#weather {
  margin-top: 100px;
}

#temp {
  font-weight: bold;
}

#temp:hover {
  background: yellow;
  cursor: pointer;
}

#wind {
  font-style: italic;
}
HTML:

<div id="weather"></div>
<p>Current Temp: <span id="temp"></span></p>
<p>Current Wind: <span id="wind"></span></p>
<p>Current Humidity: <span id="humid"></span></p>
City: <input id="city" value="London"></input><br>
Province/Country: <input id="state" value="GB"></input>
<button onclick="testFunction()">Submit</button>

【讨论】：

另外，他希望它出现在 OpenWeatherMap 中。