使用 Ajax 的 Weather Underground API答案

【问题标题】：Weather Underground API with Ajax使用 Ajax 的 Weather Underground API
【发布时间】：2016-02-20 01:31:31
【问题描述】：

我应该使用 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");
    }
});

【问题讨论】：

这是一个程序员论坛，用于获取有关开发问题的具体答案。我建议在谷歌上搜索一些教程，读几本书，或者一些在线课程。您可能找不到愿意为您编写整个程序的人。
哦，是的，我的措辞听起来像是我想要一个完整的版本。我只想知道我做错了什么。我可以弄清楚如何在我的 html 中编写该部分。我只知道我在 JavaScript 中做错了什么。

标签： javascript jquery json ajax

【解决方案1】：

这是一个让你前进的开始。您的 AJAX 函数返回 JSON 数据（打开控制台并查看）。从 JSON 数据中检索任何特定键/值的正确方法如下所示的 temp_f。然后，正如您已经完成的那样，从您从 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>

【讨论】：

这确实有帮助！谢谢！我也觉得没有链接 jQuery 真的很愚蠢。

【解决方案2】：

我完全同意@sideroxylon 的回答，这只是一个旁注。

如果您只希望检索 JSON 数据，如果您不想担心您在 $.ajax 中使用的数据类型，那么使用 $.getJSON 函数也是值得探索的，见下面我的jquerysn-p。

片段

$(document).ready(function() {
  $.getJSON("https://api.wunderground.com/api/ef5a156e62f050d2/conditions/q/OH/Columbus.json", function(response) {
    var location = response['current_observation']['display_location']['city'];
    var temp_f = response['current_observation']['temp_f'];
    $(".conditions").html("Current temperature in " + location + " is: " + temp_f + "ºF");
    console.log(response);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="conditions">
</div>

希望这会有所帮助！

【讨论】：