web开发 ajax请求 页面无法跳转

1. 具体错误描述

前端登陆时使用ajax进行请求,后端对ajax请求的跳转会出现:后端无错误,但是前端页面无法跳转的现象。

前端:
	 $(function() {
        // 点击登录按钮时,发送ajax请求
        $("#login-btn").click(function() {
            // 发送ajax请求
            $.ajax({
                url: "${pageContext.request.contextPath}/login.do",
                method: "post",
                data: {
                    "userName": $("#username").val(),
                    "passWord": $("#password").val()
                }
            });
        });
     });

     $(function () {
         if ("0" == "${isSuccess}") {
             $("#error-username").text("账号或者密码有误,请重新登录").css({"color": "red"});
         }
     })

后端:
 	@RequestMapping("/login.do")
    public ModelAndView login(User user, HttpServletRequest request, HttpServletResponse response) throws Exception {
        ModelAndView mv = new ModelAndView();
        User thisUser = userService.userLogin(user);
        if (thisUser == null) {
            mv.setViewName("login");
            mv.addObject("isSuccess", "0");
        } else {
            mv.setViewName("index");
            request.getSession().setAttribute("user", thisUser);
        }
        return mv;
    }

2. 解决方法

2.1 用<form>表单,进行提交
<form action="${pageContext.request.contextPath}/login.do" method="post">
   <input type="text" name="userName" id="userName" placeholder="邮箱/手机号码/小米ID">
    <span id="error-username">填写邮箱、手机号码或者小米ID登录</span>
    <input type="password" name="passWord" id="passWord" placeholder="密码">
    <span id="error-password">密码不能为空</span>
    <input type="submit" id="login-btn" value="登录">
</form>
2.2 前端使用js进行重定向
$("#login-btn").click(function() {
// 发送ajax请求
	$.ajax({
	    url: "/xiaomi/consumer/login/auth",
	    method: "post",
	    data: {
	        "username": $("#username").val(),
	        "password": $("#password").val()
	    },
	    success:function(response) {
	        console.log("请求发送成功");
	        console.log(response);
	        if(response.errorCode === "100") {
	            // 登录成功
	            alert("恭喜,用户登录成功!");
	            window.location = "/xiaomi/index.jsp";
	        } else {
	            // 登录失败
	            $("#error-username").text("账号或者密码有误,请重新登录").css({"color": "red"});
	        }
	    },
	    error: function() {
	        console.log("请求发送失败..");
	
	    }
	});
});
  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
在手机端的Web页面中,可以通过类似的方式使用Ajax技术实现页面跳转。不过需要注意一些适配手机端的问题,具体步骤如下: 1. 在前端页面中使用Ajax发送请求到Flask后端,代码如下: ```javascript $.ajax({ type: "POST", url: "{{ url_for('route_name') }}", data: data, success: function(response) { window.location.href = response.redirect; } }); ``` 其中,`url_for('route_name')` 可以根据Flask路由配置生成对应的URL,`data` 是发送的数据,`response.redirect` 是Flask后端返回的跳转URL。 2. Flask后端接收到请求后,处理数据并返回跳转URL,代码如下: ```python from flask import jsonify @app.route('/route_url', methods=['POST']) def route_name(): # 处理数据 # ... # 返回跳转URL return jsonify({'redirect': url_for('next_route_name')}) ``` 其中,`jsonify` 是将返回值以JSON格式返回给前端。`url_for('next_route_name')`可以根据Flask路由配置生成对应的URL。 3. Flask后端接收到跳转URL请求后,返回对应的页面,代码如下: ```python @app.route('/next_route_url') def next_route_name(): # 返回对应的页面 return render_template('next_page.html') ``` 其中,`render_template`是将指定的模板渲染成HTML页面返回给前端。 需要注意的是,在手机端Web页面中,页面大小和分辨率等因素会影响页面的显示效果,因此需要进行相关的适配工作,例如使用CSS进行样式适配,使用JavaScript进行动态调整等。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ElegantCodingWH

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值