jQuery AJAX는 마스크 레이어 로그인 확인 인터페이스를 구현합니다(소스 코드 첨부)

JQuery 마스크 레이어 로그인 인터페이스 효과 구현, AJAX 구현 로그인 확인, 전체 샘플 소스 코드 다운로드는 기사 마지막 부분에 있으므로 누구나 공부하고 연구할 수 있습니다.

운영 체제: Windwos7 Ultimate

개발 도구: Visual Studio 2010

데이터베이스: SQL Server 2005

테스트 브라우저: IE8, FF3.6.8, Google Chrome(IE8에서는 로그인 레이어 팝업 후 세로 막대가 표시되지만 나머지 두 개는 표시되지 않습니다. JS에서 세로 막대를 수정하여 이를 방지할 수 있습니다. 그런데 밑에 흰색 테두리가 생기고 IE도 좀 그런 느낌이 들더라구요...)
1. 미리보기

1) 로그인 전

2) 로그인을 클릭하면 로그인 창(레이어)이 표시되고, 회색 투명 레이어를 사용하여 기본 양식 콘텐츠를 덮고, [로그인]을 클릭하고, [로그인]을 숨기고, 로딩 사진을 표시하고, 로그인에 실패하면 표시합니다. [로그인], 로그인 사진 숨기기 및 프롬프트 정보 표시

3) 로그인 성공 후 마스크 레이어와 로그인 레이어를 제거하고 "xxx, hello!"를 표시합니다.

2. 구현

VS2010을 사용하여 웹 사이트를 생성합니다. 이 기능은 마스터 페이지 Site.master에서 구현됩니다. VS2010은 자동으로 JQuery js 파일을 Scripts 폴더에 추가하고 이 마스터 페이지를 기반으로 마스터 페이지와 두 개의 양식인 Default.aspx 및 About.aspx를 만듭니다.

1) 로그인 레이어 인터페이스 디자인, 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="关于" />
  </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="jQuery AJAX는 마스크 레이어 로그인 확인 인터페이스를 구현합니다(소스 코드 첨부)_jquery" title="jQuery AJAX는 마스크 레이어 로그인 확인 인터페이스를 구현합니다(소스 코드 첨부)_jquery" />
  </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="max-width:90%" 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 href="http://www.cnblogs.com/Ferry/">By Ferry</a>
 </div>
 </form>
</body>
</html>

로그인 후 복사

2) 마스크 레이어와 로그인 인터페이스를 팝업하는 레이어를 구현하는 js 파일 Scripts/common.js의 코드는 사이트 마스터 페이지에 있는 일부 요소의 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 });
 //当浏览器窗口大小改变时
 $(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 });
 });
 //当拉动滚动条时，弹出层跟着移动
 $(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;
 });
 //点击jQuery AJAX는 마스크 레이어 로그인 확인 인터페이스를 구현합니다(소스 코드 첨부)_jquery按钮
 $("#closeBtn").click(function () {
 $("#divLoginWindow").fadeOut("slow"); ////hide();
 //删除变灰的层
 $("#greybackground").remove();
 return false;
 });
});

//更换验证码图片
function ChangeCode(obj) {
 obj.src = "Code.aspx&#63;" + Math.random();
}

로그인 후 복사

3) [로그인]을 클릭하여 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&#63;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 배경 코드, 프론트 데스크는 나머지 페이지 명령줄을 지웁니다

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는 마스크 레이어 로그인 확인 인터페이스를 구현합니다

위 내용은 마스크 레이어 로그인 인터페이스를 구현하는 jQuery와 로그인 인증을 구현하는 AJAX의 전체 내용입니다. 모두의 학습에 도움이 되기를 바랍니다