关于ajax中执行 window.location.href不跳转问题

最新推荐文章于 2022-08-12 11:01:11 发布

weixin_42589681

最新推荐文章于 2022-08-12 11:01:11 发布

阅读量979

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/weixin_42589681/article/details/107901781

版权

jsp页面代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();//获取项目名
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>用户登录</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<!--路径问题
    不以/开始的相对路径，找资源，以当前资源的路径为基准，经常容易出现问题
 而以/开始的相对路径，找资源，是以服务器的  路径为基准（http://localhost:8080/） ,需要加上项目名
 http://localhost:8080/ssm-crud01
    
      -->
<script type="text/javascript" src="<%=path%>/static/js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css"
	href="<%=path%>/static/bootstrap/bootstrap.min.css">
<link rel="stylesheet" type="text/css"
	href="<%=path%>/static/css/login.css">
<script type="text/javascript"
	src="<%=path%>/static/bootstrap/bootstrap.min.js"></script>
<style>
</style>
<script type="text/javascript">

function btnLoginClick(){
//清空错误信息
	$("#errorInfo").html("");
		//把form表单的值序列化成一个字符串，如username=admin&password=admin
		var params=$(".form-signin").serialize();
		//发送ajax请求，验证登陆信息
		$.ajax({
		async: false,
		url:"<%=path%>/login",
		type:"POST",
		data:params,
		success : function(result) {
			//登陆成功
			if(result.code=="100"){
			//async为 false时，即异步，并且按钮btnLogin的type为submit时，window.location.href 失效
				window.location.href = "<%=basePath%>/index.jsp";
				//document.forms[0].action = "<%=basePath%>/index.jsp";
			//	document.forms[0].submit();
			}else{//登陆失败，提示错误信息
			$("#errorInfo").html(result.extend.validMsg);
			}
		}
		});
	
}
	
	

</script>
</head>

<body>
<div class="container">
<form class="form-signin">
  <img class="mb-4" src="https://v4.bootcss.com/docs/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
  <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
  <div id="errorInfo"></div>
  <label for="userName" class="sr-only">Email address</label>
  <input type="text" id="userName" name="userName" class="form-control" placeholder="请输入用户名" required="" autofocus="">
  <label for="password" class="sr-only">Password</label>
  <input type="password" id="password" name="password" class="form-control" placeholder="Password" required="">
  <div class="checkbox mb-3">
    <label>
      <input type="checkbox" value="remember-me"> Remember me
    </label>
  </div>
  <!-- <button id="btnLogin" class="btn btn-lg btn-primary btn-block" type="submit" οnclick="btnLoginClick()">Sign in</button> -->
  <button id="btnLogin" class="btn btn-lg btn-primary btn-block" type="button" οnclick="btnLoginClick()">Sign in</button>
  <p class="mt-5 mb-3 text-muted">© 2020-2022</p>
</form>
</div>
</body>
</html>

解决方案1：
将window.location.href 改为以下方式
document.forms[0].action = “…/xx.jsp";
document.forms[0].submit();
原因分析
async为 false时，即异步，并且按钮btnLogin的type为submit时，window.location.href 失效

解决方案2
把你的 type=“submit” 换成type=“button”
原因分析
ajax+submit+同步----就是你用ajax请求服务器，而且用的是同步的方式，并且你是通过点击了type类型为submit的按钮来触发这个ajax。

这个时候，首先你点击了submit，它会提交表单，但是由于你用了ajax的同步操作，submit的提交被阻塞，ajax先执行，这个时候，如果你在ajax的回调函数（如：success）中写了document.location.href=‘xxx.html’，它是执行了，的确是去执行了跳转的，于是ajax完成了，那接下来就要把刚才的submit提交的请求完成。于是呢又要从xxx.html跳回到刚才那个页面（无论你submit有没有提交具体的数据，总之提交了之后如果后台没有执行跳转/重定向，它就要回到原来的页面。）

即：ajax就是如你所想那样执行了，也从A页面跳到了B页面，但是由于submit这种类型的特殊性，又让B页面跳回了A页面，由于这个ajax执行完再执行submit请求的过程处理的很快，你会感到好像没有效果，但是你仔细观察，会发现这个过程页面会刷新的，其实就是B页面跳回到A页面。

weixin_42589681

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
关于ajax中执行 window.location.href不跳转问题

jsp页面代码<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><% String path = request.getContextPath();//获取项目名 String basePath = request.getScheme() + "://"
复制链接

扫一扫