ASP.NET + jQuery + AJAX 实现用户登录

文章列表 - 她和她的猫

她和她的猫 · 2017-02-09 · via 文章列表 - 她和她的猫

用户登录在网站中是不可或缺的功能，常见的方法就是使用Form表单将数据提交给后台，后台对帐号密码进行验证从而实现了用户登录。

随着技术的发展，一些网站开始使用 AJAX 的方式进行登录，登录成功后只会刷新局部，从而提升了用户体验。在本文中，将使用ASP.NET和jQuery来实现登录功能。

准备数据库

我们使用SQLServer数据库，创建一章 Users 表，SQL 语句如下：

GO
/****** Object:  Table [dbo].[Users]    Script Date: 2017/2/9 21:25:22 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Users](
	[UserID] [int] IDENTITY(1,1) NOT NULL,
	[UserName] [nvarchar](50) NOT NULL,
	[Password] [nvarchar](50) NOT NULL,
	[RegTime] [datetime] NULL,
 CONSTRAINT [PK_Users] PRIMARY KEY CLUSTERED 
(
	[UserID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

然后往Users表里面插入一条数据：

GO
SET IDENTITY_INSERT [dbo].[Users] ON 
INSERT [dbo].[Users] ([UserID], [UserName], [Password], [RegTime]) VALUES (1, N'her-cat', N'E10ADC3949BA59ABBE56E057F20F883E', CAST(0x0000A715015BDD20 AS DateTime))
SET IDENTITY_INSERT [dbo].[Users] OFF

前端页面

记得在 head 中引入 jQuery 类库。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="UserAjaxLoginDemo.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ASP.NET+jQuery+ AJAX 实现用户登录实例</title>
    <script src="Js/jquery.min.js"></script>
    <style type="text/css">
        #loginForm {
            border: 1px solid gray;
            text-align: center;
            width: 300px;
        }

            #loginForm tr {
                height: 35px;
            }

                #loginForm tr:nth-child(1) {
                    background-color: skyblue;
                    font-weight: bold;
                }
    </style>
</head>
<body>
    <table id="loginForm">
        <tr>
            <td>用户登录</td>
        </tr>
        <tr>
            <td>
                <label>用户名：</label><input type="text" name="userName" value=" " />
            </td>
        </tr>
        <tr>
            <td>
                <label>密&nbsp;码：</label><input type="password" name="password" value="" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" name="btnSubmit" value="登 录" />
            </td>
        </tr>
    </table>
</body>
</html>

用户在点击登录按钮以后，先验证用户名密码是否为空，然后向 UserLogin.ashx 文件发送 AJAX 请求，如果验证成功，则会在登录按钮下显示登录成功，否则提示相应的错误信息。

<script type="text/javascript">
        $(function () {
            $("input[name='btnSubmit']").click(function () {
                var _this = $(this);
                var userName = $("input[name='userName']").val().trim();
                var password = $("input[name='password']").val().trim();
                if (userName == "") {
                    alert("用户名不能为空！");
                    $("input[name='userName']").focus();
                    return false;
                }
                if (password == "") {
                    alert("密码不能为空！");
                    $("input[name='password']").focus();
                    return false;
                }
                $.ajax({
                    type: "POST",
                    url: "UserLogin.ashx",
                    dataType: "JSON",
                    data: { "userName": userName, "password": password },
                    beforeSend: function () {
                        _this.val("登录中...");
                    },
                    success: function (result) {
                        if (result.statusCode == 200) {
                            var trObj = "<tr><td><span style='color:green;'>登录成功!</span>欢迎您:" + result.username + "</td></tr>";
                            $(trObj).appendTo("#loginForm");
                        } else {
                            alert(result.message);
                        }
                    }
                });
                _this.val("登 录");
            });
        });
</script>

UserLogin.ashx 文件

先判断请求方法是不是POST，然后接收传过来的用户名和密码，并使用 DBHelper 类与数据库中的用户名和密码进行比对，如果比对成功，则使用FormsAuthenticationTicket 创建身份验证票据，并返回用户名和状态码，否则返回对应的错误信息。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Runtime.Serialization;
using System.Web.Script.Serialization;
using System.Security.Cryptography;
using System.Web.Security;
using System.Text;

namespace UserAjaxLoginDemo
{
    /// <summary>
    /// UserLogin 的摘要说明
    /// </summary>
    public class UserLogin : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/json";
            if (context.Request.HttpMethod.ToUpper().Equals("POST"))
            {
                string userName = context.Server.HtmlEncode(context.Request.Form["userName"]);
                string password = context.Server.HtmlEncode(context.Request.Form["password"]);
                if (userName.Trim().Equals(""))
                {
                    this.ResponseJsonMsg(201, "用户名不能为空！");
                }
                if (password.Trim().Equals(""))
                {
                    this.ResponseJsonMsg(201, "密码不能为空！");
                }
                password = this.Str2Md5(password);
                string sql = string.Format("SELECT * FROM Users WHERE UserName = '{0}'", userName);
                DataTable dt = DBHelper.GetInstance().GetDataTable(sql);
                if (dt.Rows.Count > 0)
                {
                    if (dt.Rows[0]["Password"].ToString().Equals(password))
                    {
                        //创建身份验证票据
                        FormsAuthenticationTicket ticket = new FormsAuthenticationTicket(1,
                                                       userName,
                                                       DateTime.Now,
                                                       DateTime.Now.AddDays(30),
                                                       true,
                                                       "User",
                                                       FormsAuthentication.FormsCookiePath);
                        //加密身份验证票据 
                        string hash = FormsAuthentication.Encrypt(ticket);
                        //创建要发送到客户端的cookie 
                        HttpCookie cookie = new HttpCookie(FormsAuthentication.FormsCookieName, hash);
                        cookie.Expires = ticket.Expiration;
                        context.Response.SetCookie(cookie);
                        var obj = new
                        {
                            statusCode = 200,
                            username = userName,
                            message = "登录成功！"
                        };
                        context.Response.Write(new JavaScriptSerializer().Serialize(obj));
                    }
                    else
                    {
                        this.ResponseJsonMsg(202, "密码错误！");
                    }
                }
                else
                {
                    this.ResponseJsonMsg(202, "用户不存在！");
                }
            }
        }

        /// <summary>
        /// 响应json消息
        /// </summary>
        /// <param name="code"></param>
        /// <param name="msg"></param>
        public void ResponseJsonMsg(int code, string msg)
        {
            var obj = new
            {
                statusCode = code,
                message = msg
            };
            HttpContext.Current.Response.Write(new JavaScriptSerializer().Serialize(obj));
            HttpContext.Current.Response.End();
        }

        /// <summary>
        /// 字符串MD5加密
        /// </summary>
        /// <param name="str"></param>
        /// <returns></returns>
        public string Str2Md5(string str)
        {
            byte[] result = Encoding.Default.GetBytes(str.Trim());
            MD5 md5 = new MD5CryptoServiceProvider();
            byte[] output = md5.ComputeHash(result);
            return BitConverter.ToString(output).Replace("-", "");
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

总结

总的来说，登录的流程为 AJAX 提交数据 =》后台验证数据并返回相应的消息 =》根据返回的消息进行操作。

这是一篇过去很久的文章，其中的信息可能已经有所发展或是发生改变。

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。原文来自 — 版权归原作者所有。

推荐订阅源

文章列表 - 她和她的猫

准备数据库

前端页面

UserLogin.ashx 文件

总结