天氣信息

我在學習如何使用HTML，CSS和JavaScript來調用openweather.org的API調用。很多困難寫了代碼，但不知道我在這裏做了什麼錯誤。我必須在Chrome的控制檯中獲得輸出，但無法獲得。你們能讓我知道我犯錯的地方嗎？以下是我的代碼。所有3個文件.html，.css和.js都保存在一個目錄中。天氣信息

index.html文件：

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    <meta charset="utf-8"/> 
     <title>Weather</title> 

     <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <link rel="stylesheet" href="style.css"> 

    </head> 

    <body> 
    <div class="jumbotron" style="margin-bottom:0px; color:white; background-color: #4aa1f3;"> 
     <h2 class="text-center" style="font-size:50px; font-weight:600;"> Get current weather</h2> 

    </div> 

     <div class="container"> 
      <div class="row" style="margin-bottom:20px;"> 
       <h3 class="text-center text-primary">Enter City Name</h3> 
       <span id="error"></span> 

      </div> 
      <div class="row form-group form-inline" id="rowDiv"> 
       <input type="text" name="city" id="city" class="form-control" placeholder="City Name"> 
       <button id="submitWeather" class="btn btn-primary">Search City</button>   
      </div> 
      <div id="show">  </div> 

     </div> 

    <!-- jQuery library --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

    <!-- Latest compiled and minified JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

     <script src="weatherr.js"></script> 



     </body> 
    </html>

style.css文件

#rowDiv{ 
     margin:auto; 
     text-align: center; 
     width: 100%; 
    } 
    input[type="text"]{ 
     height:40px; 
     font-size:20px; 

    } 
    #submitWeather{ 
     height:40px; 
     font-size:20px; 
     font-weight: bold; 
    }

weather.js文件

$(document).ready(function(){ 
     $('#submitweather').click(function(){ 
      var city = $("#city").val(); 
      if(city != ''){ 
       $.ajax({ 
        url: 'http://api.openweathermap.org/data/2.5/weather?q=' + city + "&units=metric" + "&APPID=c49f2a5b07ce03250befb407c4410be3", 
        type: "GET", 
        dataType: "jsonp", 
        success: function(data){ 

        console.log(data); 



        } 
       }); 

      } else { 
       $("#error").html('field cannot be empty'); 
      } 
     }); 
    });

來源

2017-05-29 Hara

success: function(data){ 

    console.log(data); 

}

你應該把你的代碼來顯示日e數據在這裏你想要的。你的方式，它只會顯示在console。

我想你的意思是沿着線的東西：

$("#show").html(data);

使用console.log(data)，看看有什麼data正在恢復。

我希望它能幫助你！

你錯過了一個大寫字母：

$("#submitWeather").click(...)

不$('#submitweather').click(..)

來源

2017-05-29 16:44:51 Tico

我想把輸出鉻控制檯來測試..它沒有顯示在控制檯東西。 – Hara

你想要做的是顯示數據的天氣API被髮回給你。現在讓我們看看數據是什麼樣的：這是紐約當前的天氣預報。您會看到您要的信息位於weather陣列中。要訪問您需要更改您的Javascript。

$(document).ready(function(){ 
    $('#submitWeather').click(function(){ 
     var city = $("#city").val(); 
     if(city != ''){ 
      $.ajax({ 
       url: 'http://api.openweathermap.org/data/2.5/weather?q=' + city + "&units=metric" + "&APPID=c49f2a5b07ce03250befb407c4410be3", 
       type: "GET", 
       dataType: "jsonp", 
       success: function(data){ 

       // you gave the DIV that you want to display the weather information in "show", so that's where this is going: 
       var html = "<h2>"+data.name+"</h2><br>"; 
       data.weather.forEach(function(city) { 
        html += "\n"+"<p><img src='http://openweathermap.org/img/w/"+city.icon+".png'>"+city.description+"</p>"; 
       }); 

       $("#show").html(html);     

       } 
      }); 

     } else { 
      $("#error").html('field cannot be empty'); 
     } 
    }); 
});

您可以對數據做更多的工作，但是這樣做就像魅力一樣。唯一的問題是OpenWeatherMap不允許通過HTTPS的請求，所以你的瀏覽器可能會在Stackoverflow中阻止它。自己嘗試一下，不要害怕詢問有什麼不清楚的地方！，乾杯！

$(document).ready(function(){ 
 
     $('#submitWeather').click(function(){ 
 
      var city = $("#city").val(); 
 
      if(city != ''){ 
 
       $.ajax({ 
 
        url: 'http://api.openweathermap.org/data/2.5/weather?q=' + city + "&units=metric" + "&APPID=c49f2a5b07ce03250befb407c4410be3", 
 
        type: "GET", 
 
        dataType: "jsonp", 
 
        success: function(data){ 
 

 
        // you gave the DIV that you want to display the weather information in "show", so that's where this is going: 
 
        var html = "<h2>"+data.name+"</h2><br>"; 
 
        data.weather.forEach(function(city) { 
 
         html += "\n"+"<p><img src='http://openweathermap.org/img/w/"+city.icon+".png'>"+city.description+"</p>" 
 
        }); 
 

 
        $("#show").html(html);     
 

 
        } 
 
       }); 
 

 
      } else { 
 
       $("#error").html('field cannot be empty'); 
 
      } 
 
     }); 
 
    });

#rowDiv{ 
 
      margin:auto; 
 
      text-align: center; 
 
      width: 100%; 
 
     } 
 
     input[type="text"]{ 
 
      height:40px; 
 
      font-size:20px; 
 

 
     } 
 
     #submitWeather{ 
 
      height:40px; 
 
      font-size:20px; 
 
      font-weight: bold; 
 
     }

<!DOCTYPE html> 
 
     <html lang="en"> 
 
     <head> 
 
     <meta charset="utf-8"/> 
 
      <title>Weather</title> 
 

 
      <!-- Latest compiled and minified CSS --> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
     <link rel="stylesheet" href="style.css"> 
 

 
     </head> 
 

 
     <body> 
 
     <div class="jumbotron" style="margin-bottom:0px; color:white; background-color: #4aa1f3;"> 
 
      <h2 class="text-center" style="font-size:50px; font-weight:600;"> Get current weather</h2> 
 

 
     </div> 
 

 
      <div class="container"> 
 
       <div class="row" style="margin-bottom:20px;"> 
 
        <h3 class="text-center text-primary">Enter City Name</h3> 
 
        <span id="error"></span> 
 

 
       </div> 
 
       <div class="row form-group form-inline" id="rowDiv"> 
 
        <input type="text" name="city" id="city" class="form-control" placeholder="City Name"> 
 
        <button id="submitWeather" class="btn btn-primary">Search City</button>   
 
       </div> 
 
       <div id="show">  </div> 
 

 
      </div> 
 

 
     <!-- jQuery library --> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
     <!-- Latest compiled and minified JavaScript --> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
      <script src="weather.js"></script> 
 

 

 

 
      </body> 
 
     </html>

來源

2017-05-29 17:08:13 Luca

回答

相關問題