gpt4 book ai didi

javascript - 天气信息

转载 作者:行者123 更新时间:2023-11-28 03:40:22 25 4
gpt4 key购买 nike

我正在尝试学习使用 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com