根据下列代码@GetMapping("/flightQuery") public String queryFlight(@RequestParam("flightNum") String flightNum, @RequestParam("date") String date) { FlightDO flightDO = adminService.query(flightNum,date); return flightDO.getCompany(); }写出对应的民航系统HTML页面,包括输入框输入航班号,日期选择,点击查询按钮,发送对应请求到后端,并将后端返回的数据渲染到HTML页面上
时间: 2024-01-21 20:02:38 浏览: 87
以下是一个简单的HTML页面,包括一个表单,用户可以在表单中输入航班号和日期,并点击查询按钮以查询航班信息。当用户点击查询按钮时,页面将会发送请求到后端,并将返回的航班信息展示在页面上。
```
<!DOCTYPE html>
<html>
<head>
<title>民航系统</title>
</head>
<body>
<h1>查询航班信息</h1>
<form id="flightQueryForm" action="/flightQuery" method="GET">
<label for="flightNum">航班号:</label>
<input type="text" id="flightNum" name="flightNum" required><br><br>
<label for="date">日期:</label>
<input type="date" id="date" name="date" required><br><br>
<input type="submit" value="查询">
</form>
<div id="flightInfo"></div>
<script>
const form = document.querySelector('#flightQueryForm');
const flightInfoDiv = document.querySelector('#flightInfo');
form.addEventListener('submit', (event) => {
event.preventDefault();
const flightNum = document.querySelector('#flightNum').value;
const date = document.querySelector('#date').value;
fetch(`/flightQuery?flightNum=${flightNum}&date=${date}`)
.then(response => response.json())
.then(data => {
flightInfoDiv.innerHTML = `
<p>航空公司: ${data.company}</p>
<p>出发机场: ${data.departureAirport}</p>
<p>到达机场: ${data.arrivalAirport}</p>
<p>出发时间: ${data.departureTime}</p>
<p>到达时间: ${data.arrivalTime}</p>
`;
})
.catch(error => {
console.error('查询航班信息失败', error);
});
});
</script>
</body>
</html>
```
阅读全文