jQuery AJAX implementiert die Anmeldeüberprüfungsschnittstelle auf Maskenebene (Quellcode beigefügt)

Implementierung des JQuery-Maskenschicht-Anmeldeschnittstelleneffekts, AJAX-Implementierung der Anmeldeüberprüfung, vollständiger Beispielquellcode-Download am Ende des Artikels, jeder ist herzlich zum Lernen und Lernen willkommen.

Betriebssystem: Windwos7 Ultimate

Entwicklungstools: Visual Studio 2010

Datenbank: SQL Server 2005

Testbrowser: IE8, FF3.6.8, Google Chrome (in IE8 wird ein vertikaler Balken angezeigt, nachdem die Anmeldeebene angezeigt wird, die anderen beiden werden jedoch nicht angezeigt. Der vertikale Balken kann in JS geändert werden, um dies zu verhindern Aber es wird unten ein weißer Rand sein, und ich habe immer mehr das Gefühl, dass IE ein bisschen so ist ...)
1. Vorschau

1) Vor dem Anmelden

2) Klicken Sie auf „Anmelden“, um das Anmeldefenster (Ebene) anzuzeigen, und verwenden Sie eine graue, transparente Ebene, um den Hauptformularinhalt abzudecken. Klicken Sie auf „Anmelden“, „Anmelden“ ausblenden und das Ladebild anzeigen. Wenn die Anmeldung fehlschlägt, zeigen Sie es an [Anmelden], Anmeldebild ausblenden und Eingabeaufforderungsinformationen anzeigen

3) Entfernen Sie nach erfolgreicher Anmeldung die Maskenebene und die Anmeldeebene und zeigen Sie „xxx, hallo!“ an

2. Umsetzung

Verwenden Sie VS2010, um eine Website zu erstellen. Diese Funktion ist in der Masterseite Site.master implementiert. VS2010 fügt die JQuery-JS-Datei automatisch dem Skriptordner hinzu und erstellt eine Masterseite und zwei Formulare basierend auf dieser Masterseite, Default.aspx und About.aspx.

1) Design der Login-Layer-Schnittstelle, siehe Code in 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 implementiert die Anmeldeüberprüfungsschnittstelle auf Maskenebene (Quellcode beigefügt)_jquery" title="jQuery AJAX implementiert die Anmeldeüberprüfungsschnittstelle auf Maskenebene (Quellcode beigefügt)_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>

Nach dem Login kopieren

2) Der Code der js-Datei Scripts/common.js, der die Maskenebene implementiert, und die Ebene, die die Anmeldeschnittstelle öffnet. Beachten Sie die IDs einiger Elemente in der Masterseite Site. Meister sind darin festgeschrieben

$(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 implementiert die Anmeldeüberprüfungsschnittstelle auf Maskenebene (Quellcode beigefügt)_jquery按钮
 $("#closeBtn").click(function () {
 $("#divLoginWindow").fadeOut("slow"); ////hide();
 //删除变灰的层
 $("#greybackground").remove();
 return false;
 });
});

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

Nach dem Login kopieren

3) Klicken Sie auf [Anmelden], um den Code der js-Datei Scripts/login.js zu implementieren, der die AJAX-Anmeldeüberprüfungsfunktion implementiert

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>");
 }
 }
 })
}

Nach dem Login kopieren

4) Der angeforderte CheckLogin.aspx-Hintergrundcode, die Rezeption löscht die verbleibende Seitenbefehlszeile

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");
 }
 }
}

Nach dem Login kopieren

Quellcode-Download:

jQuery AJAX implementiert eine Schnittstelle zur Anmeldeüberprüfung auf Maskenebene

Das Obige ist der gesamte Inhalt von jQuery zur Implementierung der Anmeldeschnittstelle auf Maskenebene und AJAX zur Implementierung der Anmeldeüberprüfung. Ich hoffe, dass es für das Lernen aller hilfreich sein wird.