Ajax天气地下API

我应该使用Ajax和JSON创建Weather Underground API的应用程序，但实际上并没有太多的方向去了解它。如果我能看到代码的完整版本，那么我对如何开始应该有一些了解。这就是我学习的方式。我对JSON有一点了解，但我不确定我的下一步是什么。Ajax天气地下API

这是我的代码：

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

来源

2016-02-20 Matt Lee

这是一个程序员论坛，以获得有关开发问题的具体答案。我建议在Google上搜索一些教程，阅读几本书或者在线课程。你可能不会找到任何愿意为你编写整个程序的人。 – Ageonix

哦，是的，我的措辞使得它听起来像我想要一个完整的版本。我只想知道我做错了什么。我可以弄清楚如何在我的html中编写这个部分。我只知道我在JavaScript中做错了什么。 –

这里是一个开始，让你去。你的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>

来源

2016-02-20 03:00:23 sideroxylon

这实际上有帮助！谢谢！另外我觉得没有链接jQuery真的很愚蠢。 –

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

如果专门期待只获得JSON数据，这将会是值得探讨使用$.getJSON功能以及，如果你不想担心您使用的$.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); 
 
    }); 
 
});

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

希望这有助于！

来源

2016-02-20 03:47:02 stark

Ajax天气地下API

回答

相关问题