我正在尝试学习使用 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');
}
});
});
最佳答案
success: function(data){
console.log(data);
}
您应该将代码放在此处显示数据的位置。按照你的说法，它只会显示在 console 中。
我想你的意思是:
$("#show").html(data);
使用 console.log(data) 查看返回的 data。
希望对你有帮助!
您漏掉了一个大写字母:
$("#submitWeather").click(...)
不是 $('#submitweather').click(..)
关于javascript - 天气信息，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44247076/