Ajax 验证登录

用户登录，若验证不通过，这时我们刷新页面就会导致用户之前的输入全部丢失，对我来说这是一种非常差的体验，所以我采用 ajax 的方法来验证表单。

项目准备

我的项目基于 ASP.NET MVC ，运用了 Bootstrap 前端 UI 框架，JavaScript 采用了 JQuery 以及 JQuery unobtrusive-ajax 库。

界面如图，只有：用户名、密码 两个输入。

具体实现

在前端 View 视图中我们使用 ASP.NET MVC 自带的 HTML 辅助方法 Ajax.BeginForm() 。对应的参数分别为：

1. Login : 控制器重的 action 名称
2. Login: 控制器名称
3. null : 路由参数值
4. AjaxOptions : Ajax参数 。数据传输方式为 post （不在地址栏显示参数），OnSuccess = “login” —— 请求发送成功后掉用的ajax 方法。
5. new { @class = “form-group” }) : HTML 属性设置

@using (Ajax.BeginForm("Login", "Login",null, new AjaxOptions { HttpMethod="post" , OnSuccess="login" }, new { @class = "form-group" }))
                {
                    <input id="userName" type="text" required="" class="col-sm-11 mx-auto form-control text-center" name="userName" placeholder="请输入用户名" autocomplete="off">
                    <input id="pwd" type="password" required="" class="col-sm-11 mx-auto form-control text-center mt-5" name="password" placeholder="请输入密码" autocomplete="off">
                    <input id="submit" type="submit" class="btn btn-success col-sm-5 mt-5" value="登录">
                    <a class="sign-up" href="" data-toggle="modal" data-target="#registered">没有账号？</a>
                }

Login 控制器代码

User user = await db.Users.Where(a => a.userName == userName).FirstOrDefaultAsync(); // 异步请求，查询数据库用户信息重是否存在对应登陆用户名的数据
            if (user == null)
            {
                return Json("errorMSG1"); // 返回 Json 登录错误信息 1
            }
            else if (user.password != password)
            {
                return Json("errorMSG2"); // 返回 Json 登录错误信息 2
            }
            HttpContext.Session["root"] = user.isAdmin == true ? "admin" : "user"; // root 存储用户权限
            HttpContext.Session["user"] = user; // 存储用户信息
			return Json("success"); // 返回 Json 登录成功信息
        }

根据返回不同的 Json 信息，ajax 方法和用户做不同的交互。

function login(checkInfo) {
    if (checkInfo == "errorMSG1") {
        alert("账号不存在请重新输入用户名");
        $("#userName").focus();
    }
    else if (checkInfo == "errorMSG2") {
        alert("账号或密码错误");
        $("#pwd").focus();
    }
    else if (checkInfo == "success") {
        alert("登录成功即将跳转管理界面");
        window.setTimeout(function () { window.location.href = "/NITMange/Index" }, 500); // 等待半分钟跳转至管理中心
    }
    else {
        alert(checkInfo);
    }
}

这样一个简单的 ASP.NET MVC Ajax 登陆验证就实现了。