Question

我正在尝试使用HTML，CSS和JavaScript学习对openweather.org的API调用。有很多困难编写代码，但不知道我在这里做的错误是什么。我必须在Chrome的控制台中获得输出，但无法获得。你能让我知道我犯错的地方吗？以下是我的代码。所有3个文件.html，.css和.js都保存在一个目录中。

slice档案：

index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Weather</title>  <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>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  <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

Answer 1

success: function(data){

   console.log(data);

}

您应该将代码显示在此处所需的数据中。你把它放的方式，它只会显示在console。

我认为你的意思是：

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

使用console.log(data)查看data正在返回的内容。

我希望它可以帮到你！

你错过了大写字母：

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

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

Answer 2

您要做的是显示Weather API发送给您的数据。现在让我们看一下数据的样子： Wether for NY 这是纽约目前的天气预报。您会看到所需的信息位于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');
        }
    });
});

你可以用数据做更多的事情，但有了它，它就像一个魅力。

＆＃13;

$(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');
    }
  });
});

＆＃13;

#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;
}

＆＃13;

<!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>

＆＃13;

天气信息

2 个答案: