気象情報

HTML、CSS、JavaScriptを使用してopenweather.orgへのAPI呼び出しを学習しようとしています。ロットの難しさでコードを書いたが、私がここで何をしているのか分からない。私はChromeのコンソールで出力を取得する必要がありますが、取得することはできません。あなたは私が間違っている場所を教えてくれますか？以下は私のコードです。 .html、.css、.jsの3つのファイルはすべて1つのディレクトリに保存されます。気象情報

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); 

}

あなたが目を表示するようにコードを置く必要がありますあなたがここで必要な場所にデータを保存します。あなたが置く方法は、それはconsoleにのみ表示されます。

私はあなたが線に沿って何か意味を考える：dataが戻っているかを確認するconsole.log(data)を使用し

$("#show").html(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

答えて

関連する問題