使用ajax提交登录

引入jquery-1.10.2.js或者jquery-1.10.2.min.js

页面

<h3>后台系统登录</h3>     
 <form name="MyForm">
                    <div class="layui-form-item">
                        <input type="text" name="UserName" id="UserName" required lay-verify="required" placeholder="用户名" autocomplete="off" class="layui-input" />
                    </div>
                    <div class="layui-form-item">
                        <input type="password" name="UserPwd" id="UserPwd" required lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input" />
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <input type="text" name="Verity" id="Verity" required lay-verify="required" placeholder="验证码" autocomplete="off" class="layui-input" onblur="yzm()" />
                        </div>
                        <div class="layui-inline">
                            <img alt="验证码图片" id="validateCode" title="看不清？点击换一个" src="@Url.Action("SecurityCode","Account")" onclick="this.src=this.src+'?'" />
                            <a href="javascript:void(0)" onclick="javascript:document.getElementById('validateCode').src=document.getElementById('validateCode').src+'?'">看不清换一张</a>

                        </div>
                    </div>
                    <div class="layui-form-item">
                        <input type="checkbox" name="Chk" id="Chk" /><label for="chk">保存用户名和密码7天！</label>
                    </div>
                    <div class="layui-form-item m-login-btn">
                        <div class="layui-inline">
                            <button class="layui-btn layui-btn-normal" type="button" onclick="AjaxPostData()" lay-submit lay-filter="login">登录</button>
                        </div>
                        <div class="layui-inline">
                            <button type="reset" class="layui-btn layui-btn-primary">取消</button>
                        </div>
                    </div>
                </form>                      

js代码

 <script>
                    function AjaxPostData() {
                        //获取用户名
                        var userName = $("#UserName").val();
                        //获取密码
                        var userPwd = $("#UserPwd").val();
                        //获取验证码
                        var verity = $("#Verity").val();
                        //获取是否选中如果选中chk为true否则为false
                        var chk = $("input[type='checkbox']").prop("checked");
                        //alert(chk);
                        //ajax请求
                        $.ajax({
                            //请求类型
                            type: "post",
                            //请求的动作方法
                            url: "@Url.Action("Login", "Account")",
                            //请求的参数
                            data: { UserName: userName, UserPwd: userPwd, verity: verity, chk: chk },
                            //返回值的类型
                            dataType: "text",
                            //回调函数
                            success: function (data)
                            {
                                alert(data);
                                //判断data是否==1
                                if (data == "1") {
                                    //如果等于1提示验证码错误
                                    alert("验证码错误！")
                                    return;
                                }
                                //判断data是否等于2
                                else if (data == "2") {
                                    //如果等于2登录成功跳转到首页
                                    location.href = "@Url.Content("~/Home/Index")"; 
                                //判断data是否等于3
                                } else if (data == "3") {
                                   //提示用户名密码不正确
                                    alert("用户名或密码错误");
                                    return;
                                 //判断data是否等于4
                                } else if (data=="4")
                                {
                                    //提示账号状态不能为空
                                    alert("你的账号状态为不可用请联系你的部门领导");
                                }
                            }

                        });    
                    }
                </script>