写一个民航查询航班的html页面,上面是欢迎登录,中间一个框显示航班信息,下面是一左一右两个按钮,左边是查询,点击发送request请求给后端,并将后端结果输出到中间框中,点击退出按钮,转跳到首页面
时间: 2023-11-19 11:04:20 浏览: 99
航班查询系统界面
好的,我可以为您提供一个简单的示例代码。不过需要注意的是,这只是前端代码,需要与后端进行交互才能实现查询航班的功能。同时,这里使用了jQuery库来简化代码。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>民航航班查询</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// 查询按钮点击事件
$("#search-btn").click(function() {
// 获取用户输入的查询信息
var flightNum = $("#flight-num").val();
var date = $("#date").val();
// 发送请求给后端
$.ajax({
url: "/query",
type: "POST",
data: {
"flightNum": flightNum,
"date": date
},
success: function(data) {
// 将查询结果显示在中间框中
$("#result").html(data);
}
});
});
// 退出按钮点击事件
$("#logout-btn").click(function() {
// 跳转到首页
window.location.href = "/";
});
});
</script>
</head>
<body>
<h1>民航航班查询</h1>
<div>
<label>航班号:</label>
<input type="text" id="flight-num">
<br>
<label>日期:</label>
<input type="date" id="date">
<br>
<button id="search-btn">查询</button>
</div>
<hr>
<div id="result">查询结果将显示在此处</div>
<hr>
<button id="logout-btn">退出</button>
</body>
</html>
```
在这个示例中,用户需要输入航班号和日期,然后点击查询按钮发送请求给后端。后端返回的查询结果将显示在中间框中。同时,用户也可以点击退出按钮返回到首页。需要注意的是,需要将查询航班的接口地址 `/query` 替换为实际的后端接口地址。
阅读全文