Question

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

Answer 1

这是一个让你前进的开始。您的AJAX函数返回JSON数据（打开您的控制台并查看）。从JSON数据中检索任何特定键/值的正确方法如下所示，用于temp_f。然后，就像您已经完成的那样，从您从JSON中提取的各种元素构建一个字符串，并将其写入您选择的HTML元素：

＆＃13;

$.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");
  }
});

＆＃13;

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

＆＃13;

Answer 2

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

如果您只想要检索JSON数据，那么如果您不想担心在{{{{}}中使用的数据类型，则值得探索使用$.getJSON函数。 1}}，请参阅下面的$.ajax代码段。

<强>段

jquery

$(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);
  });
});

希望这有帮助！

使用Ajax的Weather Underground API

2 个答案: