jQuery AJAX 前后端登录案例（前端代码）+validate表单验证。

HTML代码

<form method="get" class="form center" id="userLogin">
    
    <input class="shurukuang" type="text" name="username" id="username" placeholder="请输入你的用户名"/>
   
    <input class="shurukuang" type="password" name="password" id="pwd" placeholder="请输入你的密码"autocomplete="off"/>

    <input name="yz" style="width: 60px" class="yanzhengma" id="vcode" type="text"placeholder="验证码"/>

    <img title="点击换一张" id="pagecode" src="/user.admethod=imgGif"
onclick="this.src='/user.ad?method=imgGif&t='+Math.random()"/>
    
    <input type="button" class="submit" name="submit" value="立即登录" id="btn">
</form>

JavaScript代码

 <script>
    $(function () {
        //1、提交前表单验证（非空）
        function validform() {
            return $("#userLogin").validate({
                rules: {
                    username: {required: true},
                    password: {required: true},
                    yz: {required: true}
                },
                messages: {
                    username: {required: "用户名不能为空"},
                    password: {required: "密码不能为空"},
                    yz: {required: "验证码不能为空"}
                }
            });
        }

        //2、登录的方法   验证输入的验证码、账号、密码 是否正确
        var login = function () {
            var username = $("#username").val();
            var password = $("#pwd").val();
            var pic = $("#vcode").val();
            var auto = $("input[name=auto]");
            var state = 0;
            if (auto.is(":checked")) {
                state = 1;
            }
            //发起AJAX请求，
            $.ajax({
                url: "/user.ad?method=login",
                method: "post",
                data: {"username": username, "password": password, "pic": pic, "state": state},
                success: function (data) {
                    //登录成功：跳转到用户主页面     如果获取到data，说明登录失败
                    if (data == "101") {
                        alert("验证码错误")
                        $("#vcode").val("");
                        //验证码输入错误，自动换一张验证码
                        $("#pagecode").attr("src","/user.ad?method=imgGif&t="+Math.random());
                    } else if (data == "102") {
                        alert("账号或密码错误")
                        $("#username").val("");
                        $("#pwd").val("");
                    } else {
                        // 登录成功跳转主页面
                        window.location.href="/index.jsp";
                    }
                }
            })
        }
        //点击事件：触发验证、登录功能
        $("#btn").click(function () {
                if (validform().form()) {
                    //如果验证成功调用登录方法
                    login();
                }
            }
        )
    });
</script>