SpringBoot+Layui+Ajax实现登录操作

---

前言

SpringBoot+Layui+Ajax实现登录操作验证用户输入的账号、密码、验证是否正确，向后台发送异步请求。

---

一、什么是 AJAX ？

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

二、使用步骤

1.编辑前端界面

代码如下：

<form  class="layui-form"  >
        <input id="cuserName" name="cuserName" placeholder="用户名"  type="text" lay-verify="required" class="layui-input" >
        <hr class="hr15">
        <input id="cuserPassword" name="cuserPassword" lay-verify="required" placeholder="密码"  type="password" class="layui-input" value="123456">
        <hr class="hr15">
        <input type="text" lay-verify="required" id="captcha" name="captcha" placeholder="验证码"  class="layui-input" value="1234">
        <hr class="hr15">
        <img th:src="@{/kaptcha}" onclick="refresh()"  id="captcha_img" alt="验证码" title="点击刷新验证码" >
        <hr class="hr15">
        <input value="登录" lay-submit lay-filter="login" style="width:100%;" type="button">
        <hr class="hr20" >
    </form>

2.Ajax

代码如下：

layui.use(['form', 'layer','jquery'],
        function(){
            $ = layui.jquery;
            var form = layui.form,
            layer = layui.layer;
            //监听提交
            form.on('submit(login)',
                function(data){
                var captcha=document.getElementById("captcha").value;
                var cuserName=document.getElementById("cuserName").value;
                var cuserPassword=document.getElementById("cuserPassword").value;
                //发异步，把数据提交给后端
                $.ajax({
                    url: "/admin/login",
                    data:{
                        cuserName:cuserName,
                        cuserPassword:cuserPassword,
                        captcha:captcha
                    },
                    type:"Post",
                    dataType:"json",
                    success:function(data){
                        console.log(data);
                        if (data.result=="success"){
                            console.log("准备跳转页面");
                            location.href="/admin/index";

                        }else if (data.msg=="验证码错误"){
                            document.getElementById("captcha").value="";
                            layer.alert(data.msg);
                        }else{
                            document.getElementById("cuserName").value="";
                            document.getElementById("cuserPassword").value="";
                            layer.alert(data.msg);
                        }
                    }
            });
        });
    });

---

3.后台

代码如下：

@PostMapping("/login")
    @ResponseBody
    public Map<String,Object> login(HttpServletRequest request,HttpSession session,CccUser cccUser){
        Map<String,Object> map = new HashMap<>();
        System.out.println("开始ajax");
        String captcha=request.getParameter("captcha");
        System.out.println(captcha);
        String cap=session.getAttribute(Constants.KAPTCHA_SESSION_KEY).toString();//获取验证码
        if(!cap.equals(captcha)){
            System.out.println("验证对比失败");
             map.put("msg","验证码错误");
        }else{
            String md5Password = DigestUtils.md5DigestAsHex(request.getParameter("cuserPassword").getBytes());
            System.out.println(md5Password);
            cccUser.setCuserPassword(md5Password);
            cccUser.setCuserName(request.getParameter("cuserName"));
            CccUser user = this.cccUserService.loginQuery(cccUser);
            if (user!=null){
                user.setCuserPassword(null);
                session.setAttribute("user",user);
                System.out.println("--------------登录成功------------");
                map.put("result","success");
            }else{
                map.put("msg","用户名/密码错误");
            }
        }
        return map;
    }

---

4.结果

总结

期间遇到了点击按钮自动刷新页面问题，具体原因如下

button,input type=button按钮在IE和w3c浏览器区别：
1、当在IE浏览器下面时，button标签按钮，input标签type属性为button的按钮是一样的功能，不会对表单进行任何操作。
2、但是在W3C浏览器，如Firefox下就需要注意了，button标签按钮会提交表单，而input标签type属性为button不会对表单进行任何操作。
解决方法：将button标签更换为input、为button按钮增加一个type=”button”属性