@GetMapping("/flightQuery") @ResponseBody public FlightDO queryFlight(@RequestParam String flightNumber, @RequestParam String date) { FlightDO flights = adminService.query(flightNumber, date); return flights; }写出对应的民航查询htnl页面,包括一个输入框输入航班号,和一个日期选择,以及一个提交按钮,得到后端对应的数据后,将结果渲染到前端页面上
时间: 2024-02-13 21:06:37 浏览: 80
以下是一个完整的民航查询HTML页面,包含一个输入框输入航班号,一个日期选择器和一个提交按钮。当用户提交表单后,页面会向后端接口发送请求,接收到返回的数据后,将结果渲染到页面上。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>民航查询</title>
</head>
<body>
<h1>民航查询</h1>
<form action="/flightQuery" method="GET" onsubmit="return queryFlight()">
<label for="flightNumber">航班号:</label>
<input type="text" id="flightNumber" name="flightNumber"><br><br>
<label for="date">日期:</label>
<input type="date" id="date" name="date"><br><br>
<input type="submit" value="提交">
</form>
<div id="result"></div>
<script>
function queryFlight() {
var flightNumber = document.getElementById("flightNumber").value;
var date = document.getElementById("date").value;
// 发送请求
var xhr = new XMLHttpRequest();
xhr.open('GET', '/flightQuery?flightNumber=' + flightNumber + '&date=' + date);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 渲染结果到页面
document.getElementById("result").innerHTML = xhr.responseText;
}
};
xhr.send();
return false;
}
</script>
</body>
</html>
```
在这个页面中,我们使用了JavaScript来实现对表单的提交操作。在表单的onsubmit事件中,调用了queryFlight函数,该函数将表单数据拼接成请求URL后,使用XMLHttpRequest对象向后端接口发送请求。当接收到返回的数据时,将结果渲染到页面上。
需要注意的是,在这个页面中,我们并没有使用JSON格式的数据,而是直接将接口返回的内容作为HTML片段渲染到页面上。如果需要使用JSON格式的数据,可以在queryFlight函数中将数据解析为JSON对象后,使用JavaScript生成页面元素并渲染到页面上。
阅读全文