AJAX實現無刷新登陸

時間 2019-12-09

標籤 ajax 實現刷新登陸欄目 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

這樣就完成了,第一次寫博客,感受萌萌噠.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。