项目笔记之ajax实现用户登陆

业务需求：

为了给用户带来良好的体验，登陆建议使用ajax异步请求，局部刷新节省资源

Ajax请求的优点和缺点

优点：

  1、最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。
  2、使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
  3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，
     减轻服务器        和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，
      ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
   4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

缺点：

1：ajax干掉了back按钮，即对浏览器后退机制的破坏。
后退按钮是一个标准的web站点的重要功能，
但是它没法和js进行很好的合作。这是ajax所带来的一个比较严重的问题，
因为用户往往是希望能够通过后退来取消前一次操作的

2：
安全问题，并且对搜索引擎的支持比较弱

Ajax实现用户登陆详细步骤

给登陆按钮绑定一个click事件，或者绑定onclick事件

 <button class="lang-btn off log-btn" id="loginBtn">登录</button>

$(function () {
        //获取表单提交的数据
        $('#loginBtn').click(function () {
            console.log(11);
            //获取表单数据
            var  data=$('#loginFrom').serialize();
            $.ajax({
                url:'${pageContext.request.contextPath}/admin/test1',
                method:'get',
                data:data,
                dataType:'text',
                success:function (result) {
                    console.log(result);
                    if(result=="ok"){
                        console.log(result)
                        var fo=document.getElementById('Msg');
                        window.location.href="${pageContext.request.contextPath}/jsp/main.jsp";
                    }
                    if(result=="error1"){
                        console.log(result)
                        var fo=document.getElementById('Msg');
                        fo.innerHTML="验证码有误！";
                    }
                    if(result=="error2"){
                        console.log(result)
                        var fo=document.getElementById('Msg');
                        fo.innerHTML="密码有误！";
                    }
                    if(result=="error3"){
                        console.log(result)
                        var fo=document.getElementById('Msg');
                        fo.innerHTML="账户有误！";
                    }
                }

            });



        });

    });

后台代码返回json串

@RequestMapping("test1")
    @ResponseBody
    public String login1(Admin admin,String code,HttpSession session){
        System.out.println("admin = " + admin);
        System.out.println("code = " + code);
        System.out.println(admin);
        String  Code1 = (String) session.getAttribute("validationCode");
        Admin admin1=new Admin();
        admin1.setUsername(admin.getUsername());
        Admin admin2 = adminService.findAdminByUsernameAndPassword(admin1);
        Admin admin3 = adminService.findAdminByUsernameAndPassword(admin);
        session.setAttribute("admin",admin3);
        if(admin2!=null){
            if(admin3!=null){
                if(code.equals(Code1)){
                    session.setAttribute("admin",admin3);
                    return "ok";
                }else {
                    return "error1";
                }
            }else {
                return "error2";
            }
        }else {
            return "error3";
        }
    }

也可以使用map进行存储返回值。