通过ajax发送post请求向controller传递参数后,页面无法跳转问题

我的项目之前都是用location.href来向后台传递参数,因为最近在学习ajax,所以将传值方式改成了ajax发送post请求,于是问题便接踵而来,我发现在controller中通过返回ModelAndView对象竟然不能实现页面跳转了,刚开始百思不得其解,现在总算明白这到底是怎么一回事了,也想出了一种解决方法,特此记录下来,方便以后回看

不能跳转的原因:

ajax实际上是通过XMLHttpRequest来向服务器发送异步请求的,从服务器获取数据,然后使用JS来更新页面,这也就是常说的局部刷新实现方式,所以ajax请求之后,服务器返回的都是纯文本流,客户端的浏览器在获取ajax异步结果时,不是直接显示在页面上,而是要通过js来进行处理,js处理完以后才能显示在页面上,所以这才导致了controller中的ModelAndView对象不能直接返回视图

解决方法:

将页面跳转的控制放到前端页面的js中来进行跳转,即location.href = 'xxxxxxx'

前端jsp页面的代码

function userresigter() {
                var phonenumber = document.getElementById("phonenumber").value.trim();
                var password = document.getElementById("password").value.trim();
                var username = document.getElementById("username").value.trim();
                var password_again = document.getElementById("password_again").value.trim();
                var yanzhengma = document.getElementById("yanzhengma").value.trim();
                
                if(username == "" || password == "" || password_again == "" || phonenumber == ""){
                    sweetAlert("请将信息填写完整");
                }else if(password != password_again){
                    sweetAlert("两次输入的密码不同");
                }else if(yanzhengma == ""){
                    sweetAlert("请输入您的短信验证码!");
                }else if(isonclick == false){
                    sweetAlert("请先请求手机验证码!");
                }else{
                    var params = {};
                    params.phonenumber = phonenumber;
                    params.password = password;
                    params.username = username;
                    params.yanzhengma = yanzhengma;
                    <!--async 设置为 false,则所有的请求均为同步请求,在没有返回值之前,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行 -->
                    $.ajax({
                        async:false,
                        url:"userresigter",
                        type:"post",
                        data: params,
                        datatype: 'json',
                        success: function (data) {
                            if(data.code == "0"){
                                window.location.href = "login";
                                sweetAlert("注册成功!");
                            }else if(data.code == "2"){
                                sweetAlert("该手机号码已经被注册");
                            }else{
                                sweetAlert("手机验证码错误");
                            }
                        }
                    });
                }
            }

Controller代码

//注册控制
    @ResponseBody
    @RequestMapping(value = "userresigter",method = RequestMethod.POST)
    public Map<String,Object> userresigter(String phonenumber,String password,String username,String yanzhengma,
                                           HttpServletRequest request,HttpServletResponse response) throws Exception {
        Map<String,Object> map = new HashMap<String,Object>();
        System.out.println("前端传来的验证码是"+yanzhengma);
        System.out.println("前端传来的手机号码是"+phonenumber);
        System.out.println("前端传来的用户名是"+username);
        System.out.println("前段传来的密码是"+password);
        Date date = new Date();
        Timestamp createtime = new Timestamp(date.getTime());
        User user = usi.queryUserbyphonenumber(phonenumber);
        if(request.getSession().getAttribute("phonevcode").equals(yanzhengma)){
            if(user == null){
                //确认添加用户
                User user1 = new User(username,password,phonenumber,createtime);
                usi.adduser(user1);
                request.getSession().setAttribute("userphone",phonenumber);
                request.getSession().setAttribute("password",password);
                map.put("code","0");
            }else{
                //该手机号码已经被注册  状态码2
                map.put("code","2");
            }    
        }else{
            //手机验证码不正确   状态码1
            map.put("code","1");
        }
        return map;
    }

controller中经过校验后,返回我自己定义的状态码给前端,再通过前端js中的代码进行页面跳转

猜你喜欢

转载自blog.csdn.net/weixin_41047704/article/details/82924558