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


Posted in Javascript onSeptember 13, 2020

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

操作系统:Windwos7 Ultimate

开发工具:Visual Studio 2010

数据库:Sql Server 2005

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

1、预览

 1)登录前

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

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

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

3)登录成功后,去掉去掉遮罩层和登录层,显示“xxx,您好! ”

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

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 相关文章推荐
用Javascript 获取页面元素的位置的代码
Sep 25 Javascript
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
js 定位到某个锚点的方法
Nov 19 Javascript
基于js实现checkbox批量选中操作
Nov 22 Javascript
基于bootstrap实现收缩导航条
Mar 17 Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 Javascript
layui点击导航栏刷新tab页的示例代码
Aug 14 Javascript
详细分析vue表单数据的绑定
Jul 20 Javascript
微信小程序抽奖组件的使用步骤
Jan 11 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
JS实现从顶部下拉显示的带动画QQ客服特效代码
Oct 24 #Javascript
js获取表格的行数和列数的方法
Oct 23 #Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 #Javascript
js中对函数设置默认参数值的3种方法
Oct 23 #Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 #Javascript
javascript跨域的方法汇总
Oct 23 #Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 #Javascript
You might like
PHP中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
php 文章调用类代码
2011/08/11 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
PhpStorm配置Xdebug调试的方法步骤
2019/02/02 PHP
再谈Yii Framework框架中的事件event原理与应用
2020/04/07 PHP
javascript 面向对象的JavaScript类
2010/05/04 Javascript
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
2016/06/01 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
Python使用微信接入图灵机器人过程解析
2019/11/04 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
快速解决jupyter启动卡死的问题
2020/04/10 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
cookies应对python反爬虫知识点详解
2020/11/25 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
美国最大的农村生活方式零售店:Tractor Supply Company(TSC)
2017/05/15 全球购物
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
运动会通讯稿100字
2014/01/31 职场文书
高中军训感言600字
2014/03/11 职场文书
大学新生军训方案
2014/05/03 职场文书
婚内房产协议书范本
2014/10/02 职场文书
工作年限证明模板
2015/06/15 职场文书
国家助学金受助感言
2015/08/01 职场文书
python for循环赋值问题
2021/06/03 Python
比较几种Redis集群方案
2021/06/21 Redis
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js
Go语言安装并操作redis的go-redis库
2022/04/14 Golang