Ajax 验证登录

最新推荐文章于 2022-08-08 19:05:07 发布

码农在途

最新推荐文章于 2022-08-08 19:05:07 发布

阅读量4.6k

点赞数 1

分类专栏： ASP.NET MVC 文章标签： Ajax

本文链接：https://blog.csdn.net/qq_38288847/article/details/90731485

版权

本文介绍了如何在ASP.NET MVC项目中利用Ajax进行登录验证，避免因页面刷新导致用户输入丢失的问题。通过使用Ajax.BeginForm()辅助方法，配合JQuery和JQuery unobtrusive-ajax库，实现前端表单的无刷新验证。登录控制器接收POST请求，并返回Json响应，前端根据响应进行相应的交互提示。

摘要由CSDN通过智能技术生成

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

项目准备

我的项目基于 ASP.NET MVC ，运用了 Bootstrap 前端 UI 框架，JavaScript 采用了 JQuery 以及 JQuery unobtrusive-ajax 库。
整体界面
界面如图，只有：用户名、密码两个输入。

具体实现

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

Login : 控制器重的 action 名称
Login: 控制器名称
null : 路由参数值
AjaxOptions : Ajax参数。数据传输方式为 post （不在地址栏显示参数），OnSuccess = “login” —— 请求发送成功后掉用的ajax 方法。
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=