我遇到的问题-02-使用layui表单发送ajax请求无法实现后端重定向-2023-06-01

我们都知道发送异步请求后,后端会携带请求值返回到请求页面,是无法跳转到新页面的。
所以我这次在使用layui的表单时发送的ajax请求我修改了默认的异步请求。

 $.ajax({
		type:"post",
		url:"login.do",
		dataType:"text",
		async:false,	//	默认异步,改为false就可以变成同步请求
		data:{"username":username,"password":password},
		success:function(res){
		    layer.alert("欢迎"); 
					
		}
 })  

但是后端的response.sendRedirect()方法依旧无法生效。

protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("utf-8");
		resp.setContentType("text/html;charset=utf-8");
		
		//	获取用户名和密码
		String username = req.getParameter("username");
		String password = req.getParameter("password");
			
		//	将获取到的用户名和密码封装到token里
		UsernamePasswordToken upToken = new UsernamePasswordToken(username,password);
			
		//	创建subject
		Subject subject = SecurityUtils.getSubject();
		
		try {
			subject.login(upToken);
			if (subject.isAuthenticated()) {
				resp.sendRedirect("index.jsp");
				//	resp.getWriter().print("{\"code\":\"0\"}");
			}else{
				
			}	
		} catch (Exception e) {
			System.out.println("异常");
		}
	}

让我疑惑的是,网络监控没有监测到login.do的请求,后端怎么拿到的值,在后端没有其它报错,只有重定向方法不生效。
在这里插入图片描述

而且如果直接在地址栏将带值的地址:
http://localhost:8080/JavaProject20230520/login.jsp?username=u10001&password=123456
改为:
http://localhost:8080/JavaProject20230520/login.do?username=u10001&password=123456
是可以正常实现跳转的。

后来有位老哥告诉我,ajax请求就是不会主动刷新页面(问答详情http://t.csdn.cn/wOo1c)。也就是说要么请求成功后的success回调函数里使用 window.location.href=“url” 方法刷新页面,要么在要发送同步请求的时候老老实实的在表单里写上action和method:

<form class="layui-form" action="login.do" method="post">

以上就是我的解决办法,如有错误欢迎指正。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
由于缺少具体的后端实现,以下代码仅提供前端页面的示例。 HTML代码: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>管理员登录</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body> <div class="layui-container"> <div class="layui-row"> <div class="layui-col-md-offset3 layui-col-md6"> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-block"> <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密码</label> <div class="layui-input-block"> <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="login">登录</button> </div> </div> </form> </div> </div> </div> <script src="layui/layui.js"></script> <script src="jquery/jquery.min.js"></script> <script> //JavaScript代码区域 layui.use('form', function(){ var form = layui.form; //监听表单提交事件 form.on('submit(login)', function(data){ //获取表单数据 var username = data.field.username; var password = data.field.password; //RSA加密密码 var encrypt = new JSEncrypt(); encrypt.setPublicKey("后端公钥"); var encrypted_password = encrypt.encrypt(password); //发送ajax请求 $.ajax({ url: "后端接口地址", type: "POST", data: { username: username, password: encrypted_password }, success: function(result){ //登录成功,跳转到管理页面 window.location.href = "管理页面地址"; }, error: function(XMLHttpRequest, textStatus, errorThrown){ //登录失败,提示错误信息 alert("登录失败:" + textStatus + " " + errorThrown); } }); return false; //阻止表单提交 }); }); </script> </body> </html> ``` 说明: - 使用layUI框架的表单组件,并添加必要的验证规则; - 监听表单提交事件,获取表单数据; - 使用JSEncrypt库对密码进行RSA加密; - 发送ajax请求,将加密后的密码和用户名发送后端接口; - 根据后端接口返回的结果进行相应的处理。 后端接口代码: ```php <?php //获取用户名和密码 $username = $_POST['username']; $password = $_POST['password']; //解密密码 $decrypt = new Crypt_RSA(); $decrypt->loadKey("后端私钥"); $password = $decrypt->decrypt($password); //进行登录验证 if ($username == "admin" && $password == "123456") { //登录成功 echo "success"; } else { //登录失败 echo "fail"; } ?> ``` 说明: - 获取前端发送的用户名和加密后的密码; - 使用后端私钥对密码进行解密; - 进行登录验证,若验证成功则返回字符串"success",否则返回字符串"fail"。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值