拉天气API数据使用JSON并附加到李的?
问题描述:
我在计算如何获取OpenWeatherMap API数据并将其附加到我的html中相应的li中时遇到了困难。感谢您的帮助,我坚持现在用下面的代码:拉天气API数据使用JSON并附加到李的?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Project 21</title>
<style>
html {margin:2em; font-size:2em; font-family:Helvetica, Arial, sans-serif;}
h1 {margin:0 0 0.2em; color:#369;}
img {float:left; margin-right:1em;}
ul {float:left; margin:0; padding:0; list-style:none;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<section>
<h1>Current Weather for </h1>
<div class="img" id="data-img"></div>
<ul>
<li><b>Conditions:</b> <span id="data-current"></span></li>
<li><b>Temperature:</b> <span id="data-temp"></span>°</li>
<li><b>Humidity:</b> <span id="data-humidity"></span>%</li>
<li><b>Wind Speed:</b> <span id="data-wind"></span>mph</li>
</ul>
</section>
<script>
$.getJSON('http://api.openweathermap.org/data/2.5/weather?callback=?',
{ 'zip': '46556,us', 'units':'imperial' },
function(data){
console.log(data);
})
.fail(function(jqxhr, textStatus, error) {
console.log("Request Failed"+ textStatus + "," + error);
});
</script>
</body>
</html>
答
你应该为了操纵标签属性或文本搜索jQuery选择。但是,这里是您的答案:
$.getJSON('http://api.openweathermap.org/data/2.5/weather?callback=?', { 'zip': '46556,us', 'units': 'imperial' }, function(data){
console.log(data);
$("#data-current").text(data.weather[0].description);
$("#data-temp").text(data.main.temp);
$("#data-humidity").text(data.main.humidity);
$("#data-wind").text(data.wind.speed);
})
.fail(function(jqxhr, textStatus, error) {
console.log("Request Failed" + textStatus + "," + error);
});
为了使用与openWeather相关的其他数据,请检查您在控制台中显示的数据。
谢谢!但它仍然没有任何显示,我是否需要执行onload等操作? – Syd
这很奇怪,因为我的浏览器中的确切代码工作。访问该页面时浏览器控制台中显示的内容是什么? –
奇怪的是,我的控制台没有任何东西。哦,没关系,愚蠢的我,我有一个不同的文件夹中的相同的文件 - 打开了错误的!再次感谢你! – Syd