javascript - jQuery 中的页面重定向随机失败。比赛条件？

Question

详细说明来自非常好的例子post by Felix Kling我写了一些 jQuery 代码来验证用户。如果身份验证成功，则应将 window.location 对象 分配/替换为新的 URL。

即使用户通过了正确的身份验证，重定向偶尔也会失败:根据 sessionStorage('Auth') 的值，经过身份验证的用户的菜单外观会被其他一些 JS 代码修改，所以我知道何时正确输入了凭据。

这是我的代码。

$(document).ready(function() {
	$('#submit').click(function() {
		var webServiceHref = window.location.href;
		var webServicePath = webServiceHref.slice(0,webServiceHref.lastIndexOf("/"));
		var serviceUrl = webServicePath + "/login.php";
		$.post(serviceUrl, 
		{
			Email: $("#Email").val(),
			Password: $("#Password").val()
		}).done(function(data, status) {
			  var json = JSON.parse(data);
			  if (json.valid == true){
				  sessionStorage.setItem('Auth', true);  
				  sessionStorage.setItem('FirstName', json.FirstName);  	
				  sessionStorage.setItem('Email', json.Email); 
				  $("#messageLine").val("Authentication succeded"); 				  
				  $(location).attr('href', webServicePath + "/welcome.html"); 
// 				  window.location.href = webServicePath + "/welcome.html"; 	
			  } else {
				  sessionStorage.clear();
				  $("#messageLine").val("Incorrect Username or Password");
			  }
		});
	});	// click
});	 // ready

此行为不取决于调用重定向的方式:

• 我留在我的代码中，注释掉了一些 JS 和 jQuery numerous posts on SO. 中建议的方法组合(window.location.assign、window.location.replace 等)
• 我什至尝试过 .reload() 但没有成功。

在 Chrome 检查器中，我什至可以看到正在执行的回调语句，正在分配新的 URL，但是当函数返回窗口对象时，有时不会改变，有时......它会。

也许 URL 的分配在导致重新加载原始 login.html 页面的其他事件之后排队？

我错过了什么？我是否错误地使用了延迟对象？

预先感谢您的帮助。

Answer 1

如果您的 "#submit" 元素实际上正在提交表单(例如，它是 form 中类型为“submit”的输入)，这可能会取消页面重定向。例如。当表单上没有指定 action 时，它只会重新加载同一页面，从而防止您对 window.location.href 的修改产生任何影响。

另请参阅该帖子:javascript redirect not working anyway

您有 3 个简单可行的解决方案:

• 将您的元素/按钮变成普通元素/按钮(不是提交)。
• 阻止元素/按钮提交表单(function (event) { event.preventDefault();/* 其余代码 */})。
• 将您的主要回调附加到表单提交事件上。然后，用户可以通过点击“Enter”来触发操作，而不仅仅是点击提交按钮。