jQuery+AJAX實現(xiàn)遮罩層登錄驗證界面（附源碼）
更新時間：2020年09月13日 10:48:54 作者：Ferry
這篇文章主要介紹了jQuery+AJAX實現(xiàn)遮罩層登錄驗證界面，并分享了源碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
JQuery遮罩層登錄界面效果的實現(xiàn)，AJAX實現(xiàn)登錄驗證，文章尾有完整示例源碼下載，歡迎大家學(xué)習(xí)研究。
操作系統(tǒng)：Windwos7 Ultimate
開發(fā)工具：Visual Studio 2010
數(shù)據(jù)庫：Sql Server 2005
測試瀏覽器：IE8、FF3.6.8、Google Chrome （IE8中彈出登錄層后會出現(xiàn)豎拉條，其他兩種沒有出現(xiàn)，那個豎拉條可以在JS中通過修改數(shù)值讓其不出現(xiàn)，但是下面會出現(xiàn)白邊，越來越覺得IE有點那個了......）
1、預(yù)覽
1）登錄前
2）點擊登錄顯示登錄窗口（層），同時用一個灰色透明層遮罩主窗體內(nèi)容，點擊【登錄】，隱藏【登錄】，顯示loading圖，登錄失敗，顯示【登錄】，隱藏登錄圖，同時顯示提示信息
3）登錄成功后，去掉去掉遮罩層和登錄層，顯示“xxx，您好！ ”
2、實現(xiàn)
使用VS2010創(chuàng)建一個Web Site，此功能是在母版頁Site.master中實現(xiàn)的。VS2010會自動添加JQuery的js文件到Scripts文件夾，并創(chuàng)建一個母版頁和基于此母版頁的Default.aspx和About.aspx兩個窗體。
1）登錄層界面設(shè)計，看Site.master中的代碼
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head runat="server"> <title>FlyNoteBook</title> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript" src="Scripts/common.js"></script> <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="Scripts/login.js"></script> <asp:ContentPlaceHolder ID="HeadContent" runat="server"> </asp:ContentPlaceHolder> </head> <body> <form runat="server"> <div class="page"> <div class="header"> <div class="title"> <img src="Images/Pictures/logo3.png" alt="FlyNoteBook Logo" /> FlyNoteBook </div> <div class="loginDisplay"> <span id="popup" runat="server">登錄</span> <span id="loginSuccess" runat="server"></span> </div> <div class="clear hideSkiplink"> <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal"> <Items> <asp:MenuItem NavigateUrl="~/Default.aspx" Text="首頁" /> <asp:MenuItem NavigateUrl="~/About.aspx" Text="關(guān)于" /> </Items> </asp:Menu> </div> </div> <!--登錄窗口:Begin--> <div id="divLoginWindow"> <table style="width: 100%;" border="0" cellpadding="2" cellspacing="0"> <tr style="background-color: #e0f3d9; border-bottom: #bfe5b3 solid 2px"> <td style="height: 38px; width: 100px;"> 用戶登錄 </td> <td> <img src="Images/Button/close.gif" id="closeBtn" align="absmiddle" alt="關(guān)閉" title="關(guān)閉" /> </td> </tr> <tr> <td colspan="2" style="height: 5px;"> </td> </tr> <tr> <td align="right"> 用戶名： </td> <td> <asp:TextBox ID="txtUserName" runat="server"></asp:TextBox> </td> </tr> <tr> <td align="right"> 密 碼： </td> <td> <asp:TextBox ID="txtPassword" TextMode="Password" runat="server"></asp:TextBox> </td> </tr> <tr> <td align="right"> 驗證碼： </td> <td> <asp:TextBox ID="txtCode" Style="width: 88px;" runat="server"></asp:TextBox> <img src="Code.aspx" id="imgRndCode" style="vertical-align: middle;" onclick="ChangeCode(this);" alt="驗證碼" title="看不清，點擊圖片更換圖片" /> </td> </tr> <tr> <td colspan="2" align="center"> <a onclick="CheckLogin()" id="alogin">登 錄</a> <img id="loading" src="Images/Loading/loading04.gif" alt="正在登錄" title="正在登錄..." /> <br /> <span id="showMes"></span> </td> </tr> </table> </div> <!--登錄窗口:End--> <div class="main"> <asp:ContentPlaceHolder ID="MainContent" runat="server" /> </div> <div class="clear"> </div> </div> <div class="footer"> <a >By Ferry</a> </div> </form> </body> </html>
2）實現(xiàn)遮罩層和彈出登錄界面的層的js文件Scripts/common.js的代碼，注意，里面硬寫了一些母版頁Site.master中的元素的ID
$(function () {
var screenwidth, screenheight, mytop, getPosLeft, getPosTop
screenwidth = $(window).width();
screenheight = $(window).height();
//獲取滾動條距頂部的偏移
mytop = $(document).scrollTop();
//計算彈出層的left
getPosLeft = screenwidth / 2 - 200;
//計算彈出層的top
getPosTop = screenheight / 2 - 150;
//css定位彈出層
$("#divLoginWindow").css({ "left": getPosLeft, "top": getPosTop });
//當(dāng)瀏覽器窗口大小改變時
$(window).resize(function () {
screenwidth = $(window).width();
screenheight = $(window).height();
mytop = $(document).scrollTop();
getPosLeft = screenwidth / 2 - 200;
getPosTop = screenheight / 2 - 150;
$("#divLoginWindow").css({ "left": getPosLeft, "top": getPosTop + mytop });
});
//當(dāng)拉動滾動條時，彈出層跟著移動
$(window).scroll(function () {
screenwidth = $(window).width();
screenheight = $(window).height();
mytop = $(document).scrollTop();
getPosLeft = screenwidth / 2 - 200;
getPosTop = screenheight / 2 - 150;
$("#divLoginWindow").css({ "left": getPosLeft, "top": getPosTop + mytop });
});
//點擊鏈接彈出登錄窗口
$("#popup").click(function () {
$("#divLoginWindow").fadeIn("slow"); //toggle("slow");
$("#txtUserName").focus();
//獲取頁面文檔的高度
var docheight = $(document).height();
//追加一個層，使背景變灰
$("body").append("<div id='greybackground'></div>");
$("#greybackground").css({ "opacity": "0.5", "height": docheight });
return false;
});
//點擊關(guān)閉按鈕
$("#closeBtn").click(function () {
$("#divLoginWindow").fadeOut("slow"); ////hide();
//刪除變灰的層
$("#greybackground").remove();
return false;
});
});
//更換驗證碼圖片
function ChangeCode(obj) {
obj.src = "Code.aspx?" + Math.random();
}
3）點擊【登錄】實現(xiàn)AJAX登錄驗證功能的js文件Scripts/login.js的代碼
var count = 0;
$(document).ready(function () {
$("#loading").hide()
});
function CheckLogin() {
$("#alogin").hide();
$("#loading").show();
var txtCode = $("#txtCode");
var txtName = $("#txtUserName");
var txtPwd = $("#txtPassword");
$.ajax({
url: "CheckLogin.aspx?Code=" + txtCode.val() + "&Name=" + txtName.val() + "&Pwd=" + txtPwd.val(),
type: "post",
datatype: "text",
success: function (returnValue) {
if (returnValue != "false") {
$("#popup").hide();
$("#showMes").hide();
$("#loginSuccess").html(returnValue + '，您好!');
$("#divLoginWindow").remove();
$("#greybackground").remove();
$("#showMes").hide();
}
else {
count = count + 1;
$("#loading").hide();
$("#alogin").show();
$("#showMes").show();
$("#showMes").html("<font color=red>登錄失敗，請檢查后重試!(" + count + "次)</font>");
}
}
})
}
4）請求的CheckLogin.aspx的后臺代碼，前臺清除剩Page命令一行
using System;
using System.Data;
public partial class CheckLogin : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
try
{
String strCode = Request.QueryString["Code"];
String strName = Request.QueryString["Name"];
String strPassword = Request.QueryString["Pwd"];
if (strCode != Session["Code"].ToString())
{
Response.Write("false");
}
else
{
DAO.SqlHelper helper = new DAO.SqlHelper();
DataTable dt = helper.FillDataTable(String.Format("Select UserName,TrueName From Clients Where UserName='{0}' And Password='{1}'",
strName,
strPassword
));
if (dt != null && dt.Rows.Count > 0)
{
Session["TrueName"] = dt.Rows[0]["TrueName"].ToString();
Response.Write(dt.Rows[0]["TrueName"].ToString());
}
else
{
Response.Write("false");
}
}
}
catch
{
Response.Write("false");
}
}
}
源碼下載：jQuery+AJAX實現(xiàn)遮罩層登錄驗證界面
以上就是jQuery實現(xiàn)遮罩層登錄界面，AJAX實現(xiàn)登錄驗證的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助
相關(guān)文章
JQuery獲取或設(shè)置ckeditor的數(shù)據(jù)(示例代碼)
JQuery獲取或設(shè)置ckeditor的數(shù)據(jù)(示例代碼)。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要介紹了jquery解析xml字符串示例,需要的朋友可以參考下2014-04-04
jQuery實現(xiàn)的回車觸發(fā)按鈕事件功能示例
這篇文章主要介紹了jQuery實現(xiàn)的回車觸發(fā)按鈕事件功能,涉及jQuery事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-03-03
jQuery + Flex 通過拖拽方式動態(tài)改變圖片的代碼
功能終于告一段落了，實現(xiàn)了預(yù)期的功能。遇到了一個小麻煩，js 會把某些變量（ 如果你是通過對象的方式傳遞的，將在傳遞之后丟失類型信息 ，后面*號部分）2011-08-08
jQuery實現(xiàn)當(dāng)按下回車鍵時綁定點擊事件
當(dāng)按下回車鍵時，綁定按鈕點擊事件，本文為大家介紹下jQuery回車鍵綁定點擊事件的具體實現(xiàn)2014-01-01
這是一款效果非常酷的jQuery和CSS3通過AJAX調(diào)用切換頁面過渡動畫特效插件。該頁面切換特效使用AJAX來動態(tài)加載鏈接內(nèi)容，在頁面加載的時候，使用CSS3來制作非?？岬捻撁孢^渡動畫效果。插件中使用pushState方法來管理瀏覽器的瀏覽歷史，需要的朋友可以參考下2015-10-10
DOM是一種與瀏覽器、平臺、語言無關(guān)的接口，使用該接口可以輕松訪問頁面中所有的標(biāo)準(zhǔn)組件,這篇文章給大家介紹了jquery dom元素操作方法，需要的朋友參考下2018-02-02
jQuery 解析xml文件實現(xiàn)腳本代碼，用到了jquery如何解析xml文件，和大家分享一下2009-08-08
如何在JS中實現(xiàn)相互轉(zhuǎn)換XML和JSON
下面先是跟大家分別介紹了JSON與XML以及它們的區(qū)別比較，后又分享關(guān)于JavaScript實現(xiàn)XML與JSON互轉(zhuǎn)例子，希望這些例子能給你帶來幫助。2016-07-07
jQuery插件StickUp實現(xiàn)網(wǎng)頁導(dǎo)航置頂
本文給大家介紹的是一款jQuery插件--StickUp，他的主要用途是實現(xiàn)網(wǎng)頁元素固定，如導(dǎo)航固定讓其總是保持在視圖中可見，效果非常不錯，這里推薦給小伙伴們。2015-04-04