使用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>