@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关于@requestMapping和@requestParam的使用

@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(); }

YOLO算法-城市电杆数据集-496张图像带标签-电杆.zip

(177406840)JAVA图书管理系统毕业设计(源代码+论文).rar

(35734838)信号与系统实验一实验报告

YOLO算法-椅子检测故障数据集-300张图像带标签.zip

基于小程序的新冠抗原自测平台小程序源代码（java+小程序+mysql+LW）.zip

YOLO算法-俯视视角草原绵羊检测数据集-4133张图像带标签-羊.zip

最新推荐

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

YOLO算法-城市电杆数据集-496张图像带标签-电杆.zip

(177406840)JAVA图书管理系统毕业设计(源代码+论文).rar

Java毕业设计项目：校园二手交易网站开发指南

管理建模和仿真的文件

【MVC标准化：肌电信号处理的终极指南】：提升数据质量的10大关键步骤与工具

能否提供一个在R语言中执行Framingham数据集判别分析的详细和完整的代码示例？

Blaseball Plus插件开发与构建教程

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

【天线性能提升密籍】：深入探究均匀线阵方向图设计原则及案例分析