气象信息
气象信息
提问于 2017-05-29 16:38:12
我正在努力学习如何使用openweather.org、CSS和JavaScript调用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');
}
});
});回答 2
Stack Overflow用户
回答已采纳
发布于 2017-05-29 16:44:51
success: function(data){
console.log(data);
}你应该把你的代码显示在你想要的数据在这里。用你的话说，它只会显示在console中。
我觉得你的意思是：
$("#show").html(data);使用console.log(data)查看data返回的内容。
我希望它能帮到你！
你错过了一个大写字母：
$("#submitWeather").click(...)不是$('#submitweather').click(..)
Stack Overflow用户
发布于 2017-05-29 17:08:13
您要做的是显示天气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');
}
});
});你可以用这些数据做更多的事情，但是有了这个，它就像一种魅力。
$(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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44247076
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号