@GetMapping("/flightQuery") @ResponseBody public FlightDO queryFlight(@RequestParam String flightNumber, @RequestParam String date) { FlightDO flights = adminService.query(flightNumber, date); return flights; }写出对应的民航查询htnl页面，包括一个输入框输入航班号，和一个日期选择，以及一个提交按钮

以下是一个简单的民航查询HTML页面，包含一个输入框输入航班号，一个日期选择器和一个提交按钮。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>民航查询</title> </head> <body> <h1>民航查询</h1> <form action="/flightQuery" method="GET"> <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> </body> </html> ``` 在这个页面中，表单的action属性指向了对应的后端接口路径，使用GET方法提交表单数据，flightNumber和date对应了后端接口的请求参数。

根据下列代码@GetMapping("/flightQuery") public String queryFlight(@RequestParam("flightNum") String flightNum, @RequestParam("date") String date) { FlightDO flightDO = adminService.query(flightNum,date); return flightDO.getCompany(); }写出对应的民航系统HTML页面，包括输入框输入航班号，日期选择，点击查询按钮，发送对应请求到后端，并将后端返回的数据渲染到HTML页面上

以下是一个简单的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> ```

这段代码总是报500的错误，给出修改代码<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>民航系统</title> </head> <body> <h1>航班查询</h1> <form action="/flightQuery" method="get"> <label for="flightNum">航班号:</label> <input type="text" id="flightNum" name="flightNum"><br><br> <button type="submit">查询</button> </form> <br><br> <div th:if="${flightDO != null}"> <p>航班公司：[[${flightDO.company}]]</p> </div> </body> </html>@GetMapping("/flightQuery") public FlightDO queryFlight(@RequestParam("flightNum") String flightNum) { FlightDO flightDO = adminService.query(flightNum); return flightDO; }

根据你提供的代码，我看到你在前端页面只传递了一个参数 `flightNum`，但是在后端的方法中接收了两个参数 `flightNum` 和 `date`。这可能是导致 500 错误的原因之一。因此，你需要在前端页面中添加一个日期选择器，并将其对应的值也传递到后端。以下是修改后的前端页面代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>民航系统</title> </head> <body> <h1>航班查询</h1> <form action="/flightQuery" method="get"> <label for="flightNum">航班号:</label> <input type="text" id="flightNum" name="flightNum"><br><br> <label for="date">日期:</label> <input type="date" id="date" name="date"><br><br> <button type="submit">查询</button> </form> <br><br> <div th:if="${flightDO != null}"> <p>航班公司：[[${flightDO.company}]]</p> </div> </body> </html> ``` 在后端的代码中，也需要将方法的参数列表修改为仅接收一个 `flightNum` 参数： ```java @GetMapping("/flightQuery") public FlightDO queryFlight(@RequestParam("flightNum") String flightNum, @RequestParam("date") String date) { FlightDO flightDO = adminService.query(flightNum, date); return flightDO; } ``` 这样，就可以在前端页面中选择日期并将其值传递到后端了。同时，需要注意前端页面中日期选择器的 name 属性必须与后端代码中的 `@RequestParam` 注解中的参数名相同。

阅读全文

相关推荐

SpringMVC参数绑定注解详解：@PathVariable, @RequestHeader, @RequestParam, @RequestBody

SpringBoot控制器注解详解：@Controller, @ResponseBody, @RestController

SpringMVC注解深度解析：从@Controller到@PathVariable

@GetMapping("/serach") public Result serach(@RequestParam String username, @RequestParam String componname, @RequestParam String tel){ List<queryorder> serach = orderService.serach(username, componname, tel); if (serach != null) return Result.success(serach); return Result.error();

@GetMapping("/prepare/serach") public Result preserach(@RequestParam String username, @RequestParam String componname, @RequestParam String tel){ List<queryorder> serach = orderService.preserach(username, componname, tel); if (serach != null) return Result.success(serach); return Result.error(); }

@GetMapping("/prepare/deliver") public Result deliver(@RequestParam String orderid){ boolean deliver = orderService.deliver(orderid); if (deliver) return Result.success(); return Result.error(); }

Spring4.0新特性：@RestController详解

详解Spring MVC的RequestMappingHandlerMapping匹配机制

ta-lib-0.5.1-cp312-cp312-win32.whl

在线实时的斗兽棋游戏，时间赶，粗暴的使用jQuery + websoket 实现实时H5对战游戏 + java.zip课程设计

ta-lib-0.5.1-cp310-cp310-win-amd64.whl

最新推荐

Spring @Bean注解配置及使用方法解析

ta-lib-0.5.1-cp312-cp312-win32.whl

在线实时的斗兽棋游戏，时间赶，粗暴的使用jQuery + websoket 实现实时H5对战游戏 + java.zip课程设计

MATLAB实现小波阈值去噪：Visushrink硬软算法对比

管理建模和仿真的文件

【交互特征的影响】：分类问题中的深入探讨，如何正确应用交互特征

c语言从链式队列 中获取头部元素并返回其状态的函数怎么写

易语言实现画板图像缩放功能教程

"互动学习：行动中的多样性与论文攻读经历"

【交互特征：优化与调试的艺术】：实战技巧，提升回归模型与分类模型的性能

c语言从链式队列中获取头部元素并返回其状态的函数怎么写