«

jQuery+AJAX实现遮罩层登录验证界面（附源码）

时间：2024-3-2 10:41     作者：韩俊     分类： Javascript

JQuery遮罩层登录界面效果的实现，AJAX实现登录验证，文章尾有完整示例源码下载，欢迎大家学习研究。

操作系统：Windwos7 Ultimate

开发工具：Visual Studio 2010

数据库：Sql Server 2005

测试浏览器：IE8、FF3.6.8、Google Chrome （IE8中弹出登录层后会出现竖拉条，其他两种没有出现，那个竖拉条可以在JS中通过修改数值让其不出现，但是下面会出现白边，越来越觉得IE有点那个了......）
1、预览

1）登录前

2）点击登录显示登录窗口（层），同时用一个灰色透明层遮罩主窗体内容，点击【登录】，隐藏【登录】，显示loading图，登录失败，显示【登录】，隐藏登录图，同时显示提示信息

3）登录成功后，去掉去掉遮罩层和登录层，显示“xxx，您好！ ”

2、实现

使用VS2010创建一个Web Site，此功能是在母版页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="关闭" title="关闭" />
  </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 href="http://www.cnblogs.com/Ferry/">By Ferry</a>
 </div>
 </form>
</body>
</html>

2）实现遮罩层和弹出登录界面的层的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 });
 //当浏览器窗口大小改变时
 $(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;
 });
 //点击关闭按钮
 $("#closeBtn").click(function () {
 $("#divLoginWindow").fadeOut("slow"); ////hide();
 //删除变灰的层
 $("#greybackground").remove();
 return false;
 });
});

//更换验证码图片
function ChangeCode(obj) {
 obj.src = "Code.aspx?" + 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?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实现遮罩层登录验证界面

以上就是jQuery实现遮罩层登录界面，AJAX实现登录验证的全部内容，希望对大家的学习有所帮助

标签: javascript

热门推荐

1 uploadify多文件上传参数设置技巧
2 两款JS脚本判断手机浏览器类型跳转WAP手机网站
3 javascript函数命名的三种方式及区别介绍
4 jQuery自定义插件详解及实例代码
5 java中JSONArray互相转换List的方法是什么
6 JavaScript的strict模式与with关键字介绍
7 Vue中的@blur/@focus事件怎么使用
8 7个去伪存真的JavaScript面试题
9 浅谈NodeJs之数据库异常处理
10 Node.js开发者必须了解的4个JS要点

日历

标签

hbase maven eclipse sybase PostgreSQL spring emcache oracle mongodb redis nginx golang java vue android ios mysql linux 微信小程序 css html php教程 javascript python php

搜索

最新文章

热门文章