我应该使用 Ajax 和 JSON 创建一个带有 Weather Underground API 的应用程序，但实际上并没有太多关于如何去做的指导。如果我能看到代码的完整版本，那么我就知道应该如何开始。我就是这样学习的。我对 JSON 了解一点，但我不确定下一步是什么。
这是我的代码:
<!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 数据(打开控制台并查看)。对于 temp_f，从 JSON 数据检索任何特定键/值的正确方法如下所示。然后，正如您已经完成的那样，根据从 JSON 中提取的各种元素构建一个字符串，并将其写入您选择的 HTML 元素:
$.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>关于javascript - 使用 Ajax 的地下气象 API，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35518066/