我正在尝试通过API密钥导入一些天气数据,目前我只想在格式化之前显示数据。
基本上我需要通过2个下拉菜单选择一个特定城市来创建天气数据查看器,一个用于选择国家,一个用于选择城市并显示数据。目前我只能选择国家(在创建我的jquery var之前,第二个下拉菜单工作正常)
这里是Html:
<!DOCTYPE html>
<html>
<head>
<title>Uk Weather Data</title>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="ajaxjqueryload.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<h1>Weather Uk Data</h1>
</header>
<section>
<select id="countries">
<option selected>Select a Country</option>
<option value="england-cities">England</option>
<option value="scotland-cities">Scotland</option>
<option value="wales-cities">Wales</option>
<option value="nireland-cities">Northern Ireland</option>
</select>
<select id="cities">
<option selected>
<< Please Select a city</option>
</select>
<div id="cityData"></div>
<div id="info"></div>
</section>
<footer>
</footer>
</body>
</html>
在这里我的jquery:
$(document).ready(function() {
$('#countries').change(function() {
$('#cities').load($(this).val() + '.html');
$('#cities').change(function) {
var weatherData = $(this).val();
var weather = $('#cityData option:selected').text();
var apiUrl = 'http://apilayer.net/api/live?access_key=45e394a5e9c6d16ba8755822834a7127&info=' + weatherData;
$.ajax({
url: 'apiUrl',
type: 'GET'
dataType: 'json'
success: function(response) {
console.log(JSON.stringify(response));
}
},
error: function() {
}
})
}
});
});