拉天气API数据使用JSON并附加到李的?

问题描述:

我在计算如何获取OpenWeatherMap API数据并将其附加到我的html中相应的li中时遇到了困难。感谢您的帮助,我坚持现在用下面的代码:拉天气API数据使用JSON并附加到李的?

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Project 21</title> 
    <style> 
    html {margin:2em; font-size:2em; font-family:Helvetica, Arial, sans-serif;} 
    h1 {margin:0 0 0.2em; color:#369;} 
    img {float:left; margin-right:1em;} 
    ul {float:left; margin:0; padding:0; list-style:none;} 
    </style> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
</head> 
<body> 
    <section> 
    <h1>Current Weather for </h1> 
    <div class="img" id="data-img"></div> 
    <ul> 
     <li><b>Conditions:</b> <span id="data-current"></span></li> 
     <li><b>Temperature:</b> <span id="data-temp"></span>&deg;</li> 
     <li><b>Humidity:</b> <span id="data-humidity"></span>%</li> 
     <li><b>Wind Speed:</b> <span id="data-wind"></span>mph</li> 
    </ul> 
    </section> 
    <script> 
    $.getJSON('http://api.openweathermap.org/data/2.5/weather?callback=?', 
    { 'zip': '46556,us', 'units':'imperial' }, 
    function(data){ 
     console.log(data); 
    }) 
    .fail(function(jqxhr, textStatus, error) { 
    console.log("Request Failed"+ textStatus + "," + error); 
    }); 



    </script> 
</body> 
</html> 

你应该为了操纵标签属性或文本搜索jQuery选择。但是,这里是您的答案:

$.getJSON('http://api.openweathermap.org/data/2.5/weather?callback=?', { 'zip': '46556,us', 'units': 'imperial' }, function(data){ 
      console.log(data); 
      $("#data-current").text(data.weather[0].description); 
      $("#data-temp").text(data.main.temp); 
      $("#data-humidity").text(data.main.humidity); 
      $("#data-wind").text(data.wind.speed); 
     }) 
     .fail(function(jqxhr, textStatus, error) { 
     console.log("Request Failed" + textStatus + "," + error); 
     }); 

为了使用与openWeather相关的其他数据,请检查您在控制台中显示的数据。

+0

谢谢!但它仍然没有任何显示,我是否需要执行onload等操作? – Syd

+0

这很奇怪,因为我的浏览器中的确切代码工作。访问该页面时浏览器控制台中显示的内容是什么? –

+0

奇怪的是,我的控制台没有任何东西。哦,没关系,愚蠢的我,我有一个不同的文件夹中的相同的文件 - 打开了错误的!再次感谢你! – Syd