Html 开放天气空气污染指数

因此，我正在为不同的社区制作一系列网页，在每个网页上我想有一个我可以自定义的小天气框，只需输入城镇名称、当前温度和当前天气状况。我希望能够完全按照我想要的方式来设计。我发现这个名为的网站似乎正是我想要的。问题是我不知道如何使用JSON。这可能很容易，但我似乎对我尝试过的任何在线教程都迷路了

这是页面的URL示例，加载一些JSON

我可以将其包含在我的文件中，动态更改城市和国家代码以获得我想要的城市。但是我怎么把它装进我的气象箱呢？假设这就是我所拥有的：

<div class="weatherbox">

  <strong class="city>{CITY NAME HERE}</strong>
  <span class="temperature">{X} °C</span>
  <p class="weatherdescription>{WEATHER DESCRIPTION HERE}</p>

</div>

{这里的天气描述}

那么如何从JSON访问数据呢？我希望这件事尽可能简单。我是否包括这样的文件以访问对象，还是更复杂

<script type="javascript" src="http://api.openweathermap.org/data/2.5/weather?q=London,uk"></script>

假设jQuery：

<script>
// Load the data through ajax, not by including it like a script:

$.get('http://api.openweathermap.org/data/2.5/weather?q=London,uk', function(data) {
    $('.weatherbox .temperature').text(data.main.temp);
});

</script>

这意味着：

返回JSON对象，而不仅仅是一个文件。您不必使用

JSON.parse（）

或

$.getJSON

允许任何人通过ajax（ajax的安全方面）请求它

---

因为Ajax默认是异步的（A代表异步），所以您需要将分配包装到函数中，该函数在请求完成后执行。

代码行：

<script type="javascript" src="http://api.openweathermap.org/data/2.5/weather?q=London,uk"></script>

看看它在起作用

注意：为了理解JSON，您可以通过一个JSON解析器来运行它，比如at—这将使您能够更好地理解接收到的内容的组成，以及如何解析它

---

双注：忘了提到这个解决方案使用JQuery-我相信有一些纯javascript的方法可以实现它，但它会更加冗长，而且（在我看来）更难理解。

下面的代码运行。您只能更改Api密钥

完整教程：

//API URL
var apiUrl=https://api.openweathermap.org/data/2.5/weather?q=London，uk&units=metric&APPID=您的_API_KEY'；
//阿贾克斯
jQuery.ajax({
url:apiUrl，
键入：“GET”，
数据类型：“jsonp”，
成功：功能（数据）{
控制台日志（数据）；
//坐标
var coordLat=data.coord.lat；
var coordLng=data.coord.lon；
//天气
var weatherId=data.weather[0].id；
var weatherMain=data.weather[0].main；
var weatherDesc=data.weather[0]。说明；
var weatherIcon=''；
var weatherBg=data.weather[0]。图标；
//基地
var baseData=data.base；
//临时工
var mainTemp=data.main.temp；
var main pressure=data.main.pressure；
var main湿度=data.main.湿度；
var mainTempMin=data.main.temp_min；
var mainTempMax=data.main.temp_max；
//可见度
var可见性=data.visibility；
//风
var风速=数据风速；
var windDeg=数据风度；
//云彩
var clouds=data.clouds.all；
//DT
var dt=data.dt；
//系统
var sysType=data.sys.type；
var sysId=data.sys.id；
var sysMessage=data.sys.message；
var sysCountry=data.sys.country；
var sysSunrise=data.sys.sunrise；
var sysSunset=data.sys.sunset；
//身份证
var id=data.id；
//名字
var name=data.name；
//鳕鱼
var cod=data.cod；
jQuery（'#city'）.html（名称）；
jQuery（“#temp'）.html（mainTemp+”°C'）；
jQuery（'#desc'）.html（weatherDesc）；
}
});
#风箱{
宽度：200px；
高度：20px；
背景：#b4ecff；
边界半径：8px；
显示：表格；
保证金：20px自动；
文本对齐：居中；
字体大小：14px；
线高：20px；
溢出：隐藏；
填充：0 10px 0；
}
坚强的
跨度{
宽度：100%；
显示：内联块；
填充：10px0；
保证金：0；
}
p{
填充：0；
保证金：0
}
强壮的{
背景#00769d；
颜色：#fff；
文本转换：大写；
字母间距：1px；
}




<script type="javascript" src="http://api.openweathermap.org/data/2.5/weather?q=London,uk"></script>

var jsonData;

$(document).ready(function ()
{
    $.getJSON('http://api.openweathermap.org/data/2.5/weather?q=London,uk', function(data) {
        jsonData = data;
        $('.city').text(jsonData.name);
        // etc
    });
});