2015-04-22 66 views
0

我在計算如何獲取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> 

回答

0

你應該爲了操縱標籤屬性或文本搜索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