button按钮提交数据ajax成功后在success跳转controller后不会跳转页面的问题

今天碰到一个问题,通过提交按钮进行提交数据后,ajax的success也能成功跳转后台,但是在跳转的后台中不走 return 的定义的页面。
原因:每个button按钮如果不填写type类型,那么就会被W3C默认为submit类型,这时当跳转链接后会自动刷新当前的页面链接,所以无论怎么点击提交按钮,始终都会停留在当前页面。
解决方案:给button按钮的type类型定义为button即可。

欢迎关注。

首先,在HTML中使用Thymeleaf模板引擎,需要在HTML页面中添加命名空间: ``` <html xmlns:th="http://www.thymeleaf.org"> ``` 接着,可以使用Thymeleaf的语法来创建一个按钮,并绑定一个JavaScript函数来实现按钮点击事件,将数据发送给Controller层: ``` <button type="button" onclick="sendData(${data})">发送数据</button> ``` 其中`${data}`是需要发送的数据,可以在Controller层中进行处理。 在JavaScript中,可以使用Ajax来发送数据Controller层,并接收Controller层返回的数据。可以使用jQuery库来简化Ajax的操作。以下是一个示例代码: ``` <script th:inline="javascript"> function sendData(data) { $.ajax({ url: "/sendData", data: {data: data}, type: 'POST', success: function(result) { // 处理返回的数据 // 弹窗显示图片 alert(result); } }); } </script> ``` 在Controller层中,可以使用@RequestParam注解来接收前端传过来的数据,并返回处理后的数据。以下是一个示例代码: ``` @PostMapping("/sendData") @ResponseBody public String sendData(@RequestParam String data) { // 处理数据 String result = "处理后的数据"; return result; } ``` 在前端成功接收到Controller层返回的数据后,可以使用JavaScript来创建一个弹窗,并显示返回的图片。以下是一个示例代码: ``` <script th:inline="javascript"> $(document).ready(function() { // 页面加载完毕后执行的代码 // 弹窗显示图片 var imgSrc = "/images/example.jpg"; var imgHtml = '<img src="' + imgSrc + '">'; alertify.alert(imgHtml); }); </script> ``` 这使用了alertify.js库来实现弹窗功能,可以在页面头部添加以下代码引入库: ``` <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/alertify.js/0.3.11/alertify.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/alertify.js/0.3.11/alertify.min.js"></script> ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值