如何使用HMTL写一个输入机场代码就可以查询当机场的metar报文
时间: 2024-09-28 11:17:08 浏览: 38
要在HTML中创建一个输入框让用户输入机场代码并显示相应的METAR报文,你需要结合JavaScript(前端脚本语言)来动态获取数据。以下是一个简单的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>机场METAR查询</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h2>请输入机场代码:</h2>
<input type="text" id="airport-code-input" placeholder="如:JFK">
<button onclick="getMetar()">查询</button>
<div id="metar-result"></div>
<script>
function getMetar() {
var airportCode = $('#airport-code-input').val(); // 获取用户输入的机场代码
if (airportCode.length === 3) { // 检查是否是三位字母的机场代码
// 这里只是一个模拟请求,实际应替换为从API获取 METAR 报文的代码
$.ajax({
url: "http://api.example.com/metar/" + airportCode, // 替换为实际的API地址
success: function(response) {
if (response.status == 'OK') {
$('#metar-result').html('<pre>' + response.metar + '</pre>');
} else {
$('#metar-result').html('无法获取 Metar 报文');
}
},
error: function(error) {
$('#metar-result').html('查询错误,请稍后再试.');
}
});
} else {
alert('请输入有效的三位字母机场代码!');
}
}
</script>
</body>
</html>
```
在这个例子中,用户输入机场代码后点击“查询”按钮,JavaScript会发起AJAX请求到指定的API端点,并将机场代码作为URL的一部分传递过去。如果服务器返回成功,就会在页面上显示对应的METAR报文。
阅读全文