带有Ajax的Weather Underground API [英] Weather Underground API with Ajax
问题描述
我应该使用Ajax和JSON使用Weather Underground API创建一个应用程序，但实际上并没有太多指导.如果我能看到完整的代码版本，那么我对应该如何开始有了一些想法.我就是这样学习的.我对JSON有点了解，但是我不确定下一步是什么.
I am supposed to create an app with the Weather Underground API using Ajax and JSON but there really wasn't much direction as to how to go about it. If I could see a completed version of the code so I have some idea of how I should even begin. That's how I learn. I know a little about JSON but I'm not sure what my next step is here.
这是我的代码:
<!DOCTYPE html>
<!--Your Name
Date
Month
-->
<html>
<head>
<title>Weather API App</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<header>
<img class="logo" src="http://icons.wxug.com/logos/PNG/wundergroundLogo_4c_horz.png" alt="logo"/>
<h1>Your Awesome Forecast Page</h1>
<nav>
<ul>
<li><a href="#">Weather</a></li>
<li><a href="#">Conditions</a></li>
<li><a href="#">Forecasts</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="conditions">
<h2>Current Conditions</h2>
<div class="window1">
</div>
<div class="window1">
</div>
<div class="window1">
</div>
<div class="window1">
</div>
<div class="window1">
</div>
<div class="window1">
</div>
<p>
<!-- 1. Display the icon for the current conditions (observation)
2. Display weather
3. Display temperature in Ferinheiths
4. Display feels like temperature
5. Display relative humidity
6. Display wind direction
7. Display wind miles per hour
-->
</p>
</div>
<div class="hourly">
<h2>Your Hourly 1-day forecast</h2>
<p>
<!-- 1. Display the Hourly 1-day forecast
2. Display the condition for each hour
3. Display the temperature for each hour
-->
</p>
</div>
<div class="7_day">
<h2>Your 7-day forecast</h2>
<p>
<!-- 1. Display the 7-day forecast
2. Display the icon
3. Display weather
4. Display highs
5. Display lows
-->
</p>
</div>
</div><!--Closes Container-->
<script src="js/main.js" type="text/javascript"></script>
</body>
</html>
@charset "UTF-8";
/* CSS Document */
body{
font-family: Arial, Helvetica, sans-serif;
background-color:darkblue;
}
#container{
width: 90%;
margin: 0 auto;
}
/*Header
------------------------------*/
header {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding: 10px;
background-color: rgba(255, 255, 255, 0.75);
margin-bottom: 30px;
}
nav {
padding: 0;
margin: 0;
}
nav ul {
padding: 0;
margin: 0;
padding-left: 10px;
}
nav li {
display: inline-block;
padding-left: 10px;
}
li a {
text-decoration: none;
color: black;
font-weight: bold;
}
li a:hover {
color: white;
}
.logo {
width: 300px;
margin: 0;
display: inline-block;
}
h1 {
display: inline-block;
margin: 0;
padding: 2%;
}
main.js
$.ajax({
url : "http://api.wunderground.com/api/ef5a156e62f050d2/conditions/q/OH/Columbus.json",
dataType : "json",
success : function(url) {
var location = url['location']['city'];
var temp_f = url['current_observation']['temp_f'];
$(".conditions").html("Current temperature in " + location + " is: " + temp_f+"ºF");
}
});
推荐答案
这是让您前进的开始.您的AJAX函数返回JSON数据(打开控制台并查看).从JSON数据中检索任何特定键/值的正确方法如下所示，用于temp_f.然后，就像已经完成的那样，使用从JSON中提取的各种元素构建一个字符串，并将其写入所选的HTML元素:
Here's a start to get you going. Your AJAX function returns JSON data (open your console and take a look). The correct way to retrieve any particular key/value from the JSON data is as shown below for temp_f. Then, as you have already done, build a string from the various elements you have extracted from the JSON, and write it to your selected HTML element:
$.ajax({
url: "http://api.wunderground.com/api/ef5a156e62f050d2/conditions/q/OH/Columbus.json",
dataType: "json",
success: function(url) {
console.log(url);
var location = 'Columbus';
var temp_f = url.current_observation.temp_f;
$(".conditions").html("Current temperature in " + location + " is: " + temp_f + "ºF");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="conditions"></div>
这篇关于带有Ajax的Weather Underground API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
