下列代码有什么问题<!DOCTYPE html> <html lang="en"> <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: "/flightQuery", type: "GET", 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 href="user-login-form" id="search-btn">查询</button> </div> <hr> <div id="result">查询结果将显示在此处</div> <hr> <button id="logout-btn">退出</button> </body> </html>@PostMapping("/flightQuery") public String queryFlight(@RequestParam("flightNum") String flightNum, @RequestParam("date") String date) { FlightDO flightDO = adminService.query(flightNum,date); return flightDO.getCompany(); }
时间: 2024-02-05 15:04:47 浏览: 84
这段代码存在两个问题:
1. 接口的请求类型不一致:前端使用了 GET 请求,而后端的接口使用了 @PostMapping 注解,应该将其改为 @GetMapping 注解。
2. 接口返回的数据类型不匹配:后端的接口返回了一个 FlightDO 对象的 company 字段,但前端的 success 回调函数中只是简单地将返回的 data 数据赋给了中间框的 HTML,这样会导致页面显示的内容不是预期的字符串,而是一个对象的字符串表示形式。应该将后端的返回值改为一个字符串类型。
以下是修正后的代码示例:
```
@GetMapping("/flightQuery")
public String queryFlight(@RequestParam("flightNum") String flightNum,
@RequestParam("date") String date) {
FlightDO flightDO = adminService.query(flightNum, date);
return flightDO.getCompany();
}
```
这样修改后,前端的 success 回调函数中获取到的 data 就是一个字符串类型的公司名称,可以直接赋值给中间框的 HTML,从而正确地显示查询结果。
相关问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>boot-01首页</title> </head> <body> <h1>工程首页</h1> <!--相对路径--> <a href="bmi.html">BMI测试</a> <a href="/bmi.html">BMI测试</a> <!--绝对路径 http://localhost:8080/--> </body> </html>
这是一个简单的HTML页面,其中包含了两个链接。第一个链接是相对路径的示例,它指向名为"bmi.html"的文件。第二个链接是绝对路径的示例,它指向根目录下的"bmi.html"文件。
相对路径是相对于当前文件所在位置的路径,而绝对路径是从根目录开始的完整路径。在这个例子中,假设您正在访问的页面位于"http://localhost:8080/",那么第一个链接将指向"http://localhost:8080/bmi.html",而第二个链接将指向"http://localhost:8080/bmi.html"。
请注意,这只是一个静态HTML页面的示例,其中包含了两个简单的链接。在实际的应用程序中,链接可能会指向更复杂的页面或功能。
postman调试的时候返回<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Error</title> </head>是什么原因
当你通过 Postman 发起请求并收到类似如下的 HTML 内容作为响应:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<!-- 其他HTML内容 -->
</body>
</html>
```
这通常意味着服务器端发生了错误,并且回应的是一个包含错误页面的 HTML 文档。以下是几种常见的原因及其对应的解决方案。
### 可能的原因及解决方案
#### 1. **路由配置错误**
- 如果你在发送 POST 请求但是却得到了一个完整的 HTML 页面而不是 JSON 或其他期望的数据结构,可能是由于 URL 路径不对或 API 版本不符等原因造成的。
**解决方法:**
验证你正在使用的路径是否准确无误地指向了正确的资源。此外,确保 HTTP 方法(GET, POST 等)也匹配目标 API 的设计规范。
#### 2. **认证失败**
- 某些 API 接口需要有效的身份验证凭证才能访问。如果你提供的令牌过期、无效或者根本没有提供,则可能导致服务器返回登录页或其他形式的身份验证提示。
**解决方法:**
核实你的请求头中包含了适当的 Authorization 字段,并且 token 是最新且合法的。可以尝试重新获取新的 access_token 并更新到 Postman 中去测试。
#### 3. **服务器内部错误**
- 当应用程序在处理特定请求时遇到了未预料的问题,它可能会返回通用的错误页面而非详细的报错信息。这类情况经常出现在生产环境中以防止敏感数据泄露。
**解决方法:**
查看服务器日志文件来确定具体是什么地方出了差错;如果是第三方服务则联系相应的支持团队寻求帮助。
#### 4. **跨域资源共享(CORS)限制**
- 浏览器的安全机制不允许来自不同源站点之间的请求交互除非明确允许。虽然 Postman 本身不受 CORS 影响,但如果涉及到前端应用与后端通信的话这个问题就变得重要起来。
**解决方法:**
对于本地开发环境来说可以在启动 Node.js 应用或者其他框架的服务时添加中间件开启 CORS 政策。对于正式部署的服务而言则需按照平台文档指导正确设置相应策略规则。
---
针对上述每种可能性,建议逐步排查直至找到根本原因。同时还可以参考 API 提供方给出的技术手册以及官方论坛等资料获得更多线索和支持。
阅读全文
相关推荐
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)