AJAX实现无刷新登陆

时间 2019-12-09 标签 ajax 实现刷新登陆

最近学习了如何实现无刷新登陆,大致的效果以下(界面比较丑,请自行忽略....):javascript

点击登陆按钮时弹出登陆窗口,输入正确的用户名密码后点击登陆则登陆窗口关闭,状态改成当前用户名.css

第一步:html

首先弹出窗口使用的是jquery-ui中的控件,第一步要学会如何使用.java

打开解压后的jquery-UI下的development-bundle->demos,找到index.html,选择dialog下的model dialog,右键查看源码,观察如何使用该控件,找到一句关键代码:$("#dialog-modal").dialog({height: 140,modal: true});这是用于显示的,打开model message中的源码,找到关闭的关键代码:$(this).dialog('close');有了这两句代码,能够控制窗口的显示与关闭,能够进行下一步了.使用时需复制jquery-ui开发包的css文件夹,js文件夹到项目中.jquery

第二步:数据库

在这里先贴出处理AJAX请求的通常处理程序的代码,虽然正真写的时候都是用到再写,但这里不可能一步一步详细列出,为了便于理解,先将通常处理程序代码贴出来:session

1.IsLogin.ashx,用于判断用户是否登陆,登陆则返回用户名.这里注意,在通常处理程序中要使用session,必须引入using System.Web.SessionState且要实现IRequiresSessionState接口ide

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.SessionState;

namespace AJAX无刷新登陆.AJAX
{
    /// <summary>
    /// IsLogin 的摘要说明
    /// </summary>
    public class IsLogin : IHttpHandler,IRequiresSessionState
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            if (context.Session["userName"] != null)
            {
                string userName = context.Session["userName"].ToString();
                context.Response.Write("yes|"+userName);
            }
            else
            {
                context.Response.Write("no");
            }
        }

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

View Code

2.CheckLogin.ashx,用于检测用户输入用户名密码是否匹配,正确则返回yes,错误返回no,这里为了简便没有链接数据库.函数

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.SessionState;

namespace AJAX无刷新登陆.AJAX
{
    /// <summary>
    /// CheckLogin 的摘要说明
    /// </summary>
    public class CheckLogin : IHttpHandler,IRequiresSessionState
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string userName = context.Request["userName"];
            string password=context.Request["password"];
            if (userName=="admin"&&password=="admin")
            {
                context.Session["userName"] = "admin";
                context.Response.Write("ok");
            }
            else
            {
                context.Response.Write("no");
            }
        }

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

View Code

3.LoginOut.ashx,用于控制用户登出,设置session为空.post

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.SessionState;

namespace AJAX无刷新登陆.AJAX
{
    /// <summary>
    /// LoginOut 的摘要说明
    /// </summary>
    public class LoginOut : IHttpHandler,IRequiresSessionState
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Session["userName"] = null;
        }

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

View Code

通常处理程序就结束了,下面贴出主界面的代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="AJAX无刷新登陆.Login" %>

<!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></title>
    <link href="JQueryUI/css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
    <script src="JQueryUI/jquery-1.4.2.min.js"></script>
    <script src="JQueryUI/jquery-ui-1.8.2.custom.min.js"></script>
    <script type="text/javascript">
        //判断是否登陆,登陆则显示登陆名,隐藏登陆按钮,显示注销按钮
        //不然相反
        var isLogin = function () {
            $.post("/AJAX/IsLogin.ashx", function (data) {
                var strs = data.split('|');
                if (strs[0] == "yes") {
                    $("#divShowLogin").hide();
                    $("#divShowLoginOut").show();
                    $("#spanName").text(strs[1]);
                } else {
                    $("#divShowLogin").show();
                    $("#divShowLoginOut").hide();
                    $("#spanState").text("未登陆");
                }
            });
        }

        $(function () {
            isLogin();
            //点击登陆弹出登陆窗口
            $("#btnShowLogin").click(function () {
                //模态窗口,设定长宽
                $("#divLogin").dialog({
                    height: 160,
                    width: 300,
                    modal: true
                });
            });

            //点击取消则关闭弹出框
            $("#btnCancel").click(function () {
                $("#divLogin").dialog('close');
            });

            //点击登陆发送post请求在通常处理程序CheckLogin.ashx中验证登陆,
            //根据回调函数结果判断是否登陆成功
            $("#btnLogin").click(function () {
                var userName = $("#txtUserName").val();
                var password = $("#txtPwd").val();
                $.post("/AJAX/CheckLogin.ashx", { "userName": userName, "password": password }, function (data) {
                    if (data == "ok") {
                        $("#divLogin").dialog('close');
                        isLogin();
                    }
                    else {
                        alert("用户名或密码错误");
                    }
                });
            });

            //点击注销发送post请求,在通常处理程序中设置session为null,并调用isLogin函数刷新状态
            $("#btnExit").click(function () {
                $.post("/AJAX/LoginOut.ashx", function () {
                    isLogin();
                });

            });

        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="divShowLogin" style="display: none">
            <span id="spanState"></span>
            <input type="button" value="登陆" id="btnShowLogin" />
        </div>
        <div id="divShowLoginOut" style="display: none">
            <span id="spanName"></span>
            <input type="button" value="注销" id="btnExit" />
        </div>
        <div id="divLogin" title="登陆窗口" style="display: none">
            <table style="text-align: left" id="tbLoin">
                <tr>
                    <td>用户名：</td>
                    <td>
                        <input type="text" id="txtUserName" /></td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td>
                        <input type="password" id="txtPwd" /></td>
                </tr>
                <tr>
                    <td>
                        <input type="button" value="登陆" id="btnLogin" /></td>
                    <td style="text-align: left">
                        <input type="button" value="取消" id="btnCancel" /></td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

View Code

这样就完成了,第一次写博客,感受萌萌哒.