SSM框架,ajax实现登陆界面验证和登陆成功后页面跳转问题

账号、密码和验证码都正确后,使用了ajax实现验证,验证结束后不能像正常一样返回一个字符串,用视图解析器来跳转页面

<!--配置JSP 显示ViewResolver(视图解析器)-->
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"></property>
    <property name="prefix" value="/jsp/"></property>
    <property name="suffix" value=".jsp"></property>
</bean>

登陆界面的ajax代码如下:

<!--AJAX方法 ,不用加载整个界面,对界面进行局部的部刷新-->
<script type="text/javascript">
    function isLogin(){
        //获取用户名,账号和验证码的值,放在url参数传递到Controller控制器
        var loginName = $("#loginName").val();
        var password = $("#password").val();
        var code = $("#code").val();
        $.ajax({
            url:"${pageContext.request.contextPath}/user/Login?loginName="+loginName+"&password="+password+"&code="+code,
            type:"post",
            data:"null",
            success:function(result){
                //把son字符串或json数组转换为json对象
                var json = JSON.parse(result);
                //i是key值,c是value值,既json[i]。比如 json={"tom":"zs"},i=tom,c=zs=json[i]
                $.each(json,function(i,c){
                  if(json[i]=="登陆成功"){
                      //使用了ajax,登陆成功了以这样的方式来跳转页面
                      window.location.href="http://localhost:8080/hotel/jsp/uindex.jsp";
                  }else{
                      if(i=="wrongPassword"){
                          //如果是账号或密码错误,则清空账号、密码,验证码不清空
                          $("#loginName").val("");
                          $("#password").val("");                        
                      }else if(i=="wrongCode"){
                          //如果只是验证码错误,清空验证码,账号和密码不清空
                          $("#code").val("");                      
                      }
                      //输出弹窗提示,比如:账号或密码错误 或 验证码错误,请重新输入
                      alert(c);
                  }
                });
            },
            error:function(){
                 alert("失败");
                 //window.location.href="http://localhost:8080/hotel/jsp/uindex.jsp";
            }
        });
    }
</script>

Controller控制器的代码如下:

@Controller
@RequestMapping("/user")
public class UserController {
    @Autowired
    UserService userService;
    @Autowired
    User users;
    @RequestMapping("/Login")
    //登陆
    public String login(HttpServletRequest request, HttpServletResponse response, @RequestParam(value = "loginName") String loginName, @RequestParam(value="password")
                        String password, @RequestParam(value = "code") String code){
        try {
            System.out.println(loginName+":"+password+":"+code);
            users.setUserName(loginName);
            users.setPasswordd(Integer.valueOf(password));
            User use = userService.login(users);
            // 验证验证码,在CodeServlet中已经保存在了session中
            String sessionCode = request.getSession().getAttribute("code").toString();
            System.out.println(sessionCode+"123");
            if (use == null){
                System.out.println("用户名或密码错误");
                //设置字符集
                response.setContentType("text/html;charset=utf-8");
                //把基础类型的数据变成jon
                JSONObject json = new JSONObject();
                json.put("wrongPassword", "账号或密码错误");
                //ajax回调
                response.getWriter().println(json);               
            }else{
                if(!code.equalsIgnoreCase(sessionCode)){
                    System.out.println("用户名和密码正确但验证码错误");
                    JSONObject json = new JSONObject();
                    json.put("wrongCode","验证码错误,请重新输入");
                    //ajax回调
                    response.getWriter().println(json);
                }else{
                    //登陆成功,把use放入session中,别的页面要用到
                    System.out.println("登陆成功,我是:"+use.getNamee());
                    request.getSession().setAttribute("user", use);
                    JSONObject json = new JSONObject();
                    json.put("success","登陆成功");
                    //ajax回调
                    response.getWriter().println(json);
                    //return "uindex";
                    //request.getRequestDispatcher("jsp/uindex.jsp").forward(request, response);
                }
            }
        }catch (Exception e){
            e.printStackTrace();
        }
        return null;
    }
}

1.登陆成功后跳转页面的第一种方式:

账号,密码和验证码都验证成功后,在Controller最后的

else{

      //登陆成功,把use放入session中,别的页面要用到

      request.getSession().setAttribute("user", use);

     JSONObject json = new JSONObject();

     json.put("success","登陆成功");

     response.getWriter().println(json);

}

语句里添加了,json作为标记,正常返回。

success:function(result){

       var json = JSON.parse(result);          //把son字符串或json数组转换为json对象

        $.each( json,function(i,c){

            if(json[i]=="登陆成功"){

                       //使用了ajax,登陆成功以这样的方式来跳转页面

                      window.location.href="http://localhost:8080/hotel/jsp/uindex.jsp";

})

}

利用window.location.href来跳转页面。

 

2.登陆成功后跳转页面的第二种方式:

把之前的json标记的三行代码删除掉,

加入 request.getRequestDispatcher("jsp/uindex.jsp").forward(request, response);(ps:我也不知道为什么要这样),如下:

else{

//登陆成功,把user放入session中,别的页面要用到

request.getSession().setAttribute("user", use);

request.getRequestDispatcher("jsp/uindex.jsp").forward(request, response);

}

然后ajax没有返回值就返回失败了,就回调到

error:function(){

 window.location.href="http://localhost:8080/hotel/jsp/uindex.jsp";

}

然后在该函数里同样利用 window.location.href 进行页面跳转。

 

  • 1
    点赞
  • 0
    评论
  • 13
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值