ajax发送请求window location href 第一次不跳转界面第二次跳转

最新推荐文章于 2023-03-09 17:22:06 发布

原创最新推荐文章于 2023-03-09 17:22:06 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

Java 同时被 2 个专栏收录

44 篇文章

订阅专栏

javaScript

3 篇文章

订阅专栏

本文探讨了在使用springmvc+mybatis整合实现的登录功能中，遇到Ajax登录后界面无法跳转的问题。详细分析了问题原因，即在表单中使用submit类型的按钮会提交表单并刷新页面，导致成功回调前界面已变化。提供了两种解决方案：一是通过在Ajax方法外添加return false阻止表单提交；二是将按钮移出表单或将类型改为非submit，避免自动提交。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记一次Bug，最近在使用springmvc+mybatis整合实现简单的登录功能，但是在使用ajax发送请求后，controller接收到并且返回给前台数据后，不执行success中设置的window.location.href来跳转界面

以下为问题代码

$(document).ready(function () {
			$("#sign-in-button").click(function () {
			    // alert("hello")
			    var username=$("#login_username").val();
			    var password=$("#login_password").val();
				$.ajax( {
							url:"${pageContext.request.contextPath}/../user/Login",
							type:"post",
							data:{
								"username":username,
                                "password":password
							},
							async:false,
					success:function (data,status) {
								if(data==("wrong"))
									 alert("用户名或密码错误，请重新输入！")
                                else if(data=="correct")
								{
									alert(data);
									window.location.href="/user/success";
								}
								else if(data=="wrong-repeatlogin")
								{
									alert("请勿重复登录！")
								}
					
                            }

						});
						//return false ; 待会你要在这加上这个来解决
			});

解决方法

在$.ajax方法外，加上return false；

为什么要加呢？

在表单中的button默认类型是submit，如果你触发ajax请求的是button，而你的button又在表单中，那么在你发送请求后，在执行success回调方法之前会提交表单，如果我们好好了解一下表单和ajax请求区别的话，可以知道表单是要刷新整个界面的，所以当你发送请求后，会提交表单，这时候你的界面就不是你之前的界面了，所以我们要让他发完请求后不要提交表单，也就是用return false终止

既然我们知道了原理，那我们也大可以这样，把button从表单拿出来，或者说不需要表单你就干脆把表单删了，反正你是ajax请求，再不济你就设置button的类型不要是submit就好了