ajax提交 post form 数据丢失_Ajax 验证用户登陆

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

项目准备

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

登陆界面

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

具体实现

在前端 View 视图中我们使用 http://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 

Login 控制器代码

User 

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

function 

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