Ajax+SpringBoot+Thymeleaf使用中遇到的跳转页面问题

前言:这周在使用 Ajax+Thymeleaf 时遇到一个问题,折腾了我很久,在此记录一下

Ajax+SpringBoot+Thymeleaf使用中遇到的跳转页面问题

问题描述

我的目的:通过 Ajax 获取数据,并通过 Model 渲染 View ,实现跳转页面并渲染数据
但是… Ajax 获取到数据并发送回服务器了,但是却无法跳转页面。

这个问题困扰了我一段时间,主要是当时只是以为页面数据没有刷新,并没有发现页面根本就没跳转…

HTML
请添加图片描述
JS(Ajax)
请添加图片描述
Controller 层
在这里插入图片描述

解决方法

我在意识到这个是页面无法跳转问题之后就试着看看重定向能不能使页面跳转,结果还是不行。

最后还行求助于万能的百度,发现页面无法跳转的原因竟然是:
ajax 只能实现局部刷新,无法执行整体的页面跳转并携带数据

额… Ajax 只能局部刷新这个概念我之前是知道的,这个甚至可以说是它的主要优点之一,因为不用整体再刷新页面…

好吧,原因是找出来了,但为什么重定向也失效了呢?

我又测试了一下发现,在浏览器端按F12查看网络请求是否成功,它响应了302状态码,响应302状态码就表示后端重定向起了作用,但是由于是ajax请求所以页面还是原来的页面。

还是那个原因:
因为ajax请求是异步请求,局部刷新的方式,所以使用重定向也无法跳转到其他的页面,如果想要跳转页面则需要在前端利用通过location.href来跳转。

解决方法:把 Ajax 请求改成了 form 表单,实现页面跳转

PS:也可以到我的个人博客查看更多内容
个人博客地址:小关同学的博客

你可以使用Ajax技术来实现不跳转页面但是可以使用不同页面的功能。具体实现步骤如下: 1. 在Spring Boot中添加依赖项,包括Spring Web和Thymeleaf。 2. 创建一个控制器类,在其中添加处理请求的方法。在方法中,你可以使用Thymeleaf模板引擎来渲染HTML页面。 3. 在HTML页面中,你需要使用JavaScript和Ajax技术来发送异步请求并接收响应。你可以使用jQuery库来简化这个过程。 4. 当用户执行某些操作时,JavaScript代码将使用Ajax技术来发送请求,然后将响应数据呈现在页面上,而无需刷新整个页面。 下面是一个简单的示例代码,它演示了如何使用AjaxSpring BootThymeleaf中实现不跳转页面但可以使用不同页面的功能。 在控制器类中: ```java @Controller public class MyController { @GetMapping("/") public String index() { return "index"; } @GetMapping("/page1") public String page1() { return "page1"; } @GetMapping("/page2") public String page2() { return "page2"; } @GetMapping("/api/data") @ResponseBody public String getData() { return "这是从服务器返回的数据。"; } } ``` 在index.html页面中: ```html <!DOCTYPE html> <html xmlns:th="https://www.thymeleaf.org"> <head> <title>不跳转页面示例</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script> $(function () { $("#btn1").click(function () { $.get("/page1", function (data) { $("#content").html(data); }); }); $("#btn2").click(function () { $.get("/page2", function (data) { $("#content").html(data); }); }); $("#btn3").click(function () { $.get("/api/data", function (data) { alert(data); }); }); }); </script> </head> <body> <h1>不跳转页面示例</h1> <button id="btn1">页面1</button> <button id="btn2">页面2</button> <button id="btn3">获取数据</button> <div id="content"> 这里将呈现不同页面的内容。 </div> </body> </html> ``` 在page1.html页面中: ```html <!DOCTYPE html> <html xmlns:th="https://www.thymeleaf.org"> <head> <title>页面1</title> </head> <body> <h1>页面1</h1> <p>这是页面1的内容。</p> </body> </html> ``` 在page2.html页面中: ```html <!DOCTYPE html> <html xmlns:th="https://www.thymeleaf.org"> <head> <title>页面2</title> </head> <body> <h1>页面2</h1> <p>这是页面2的内容。</p> </body> </html> ``` 这份代码演示了如何在Spring BootThymeleaf使用Ajax实现不跳转页面但可以使用不同页面的功能。当用户单击页面上的按钮时,JavaScript代码将使用Ajax技术来发送请求,并将服务器响应呈现在页面上,而无需刷新整个页面
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值