jQuery AJAX实现屏蔽层登录验证界面(带源代码)

JQuery屏蔽层登录界面效果，AJAX登录验证，文末完整示例源代码下载，欢迎学习。

操作系统：Windwos7 Ultimate。

开发工具：Visual Studio 2010。

数据库：Sql服务器2005。

测试浏览器：IE8、FF3.6.8、谷歌Chrome (IE8在IE8中弹出登录层后会出现竖括号，其他两个不会出现。可以通过修改JS中的数值来防止竖线出现，但是下面会有白边，越来越多的人认为ie有点.) 1.预览。

1)登录前。

2)点击登录，显示登录窗口(图层)，同时使用灰色透明层遮挡主窗体内容。单击登录隐藏登录并显示加载图。如果登录失败，显示登录，隐藏登录图并显示提示信息。

3)登录成功后，去掉屏蔽层和登录层，显示“xxx，你好！”。

2.实施。

使用VS2010创建一个网站，该网站在母版页中实现.在VS2010中，VS会自动将JQuery的js文件添加到Scripts文件夹中，并基于此母版页创建一个母版页以及Default.aspx和About.aspx两种形式。

1)登录层界面设计，看Site.master中的代码.

% @ Master Language=' c# ' AutoEventWireup=' true ' CodeFile=' site。主人。cs“Inherits=”sitemater“%！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-严格。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' XML : lang=' EN ' head runat=' server ' title fly borebook/title script src=' http 3360 scripts/jquery-1。4 .1。登录/span span ID=' loginSuccess ' runat=' server '/span/div class=' clear hideSkiplink ' as p 3360菜单ID=' NavigationMenu ' runat=' server ' CSS class=' menu ' EnableViewState=' false ' IncludeStyleBlock=' false ' Orientation=' Horizontal ' Items as p :菜单项NavigateUrl=' ~/default。aspx ' Text='首页/ASP :菜单项导航='~/About.aspx' Text='关于//Items /asp:Menu /div /div！-登录窗口： begin-div id=' divLoginWindow '表格样式='宽度： 100%；边框=' 0 '单元格填充=' 2 '单元格间距=' 0 ' tr style=' background-color : # e0f3d 9；边框-底部： # bfe 5b 3实心2px ' TD style='高度： 38px宽度： 100像素用户登录/TD TD img src=' http : IMages/Button/close。gif ' id=' closeBtn ' align=' ABS middle ' alt='关闭标题='关闭//TD/tr/tr TD col span=' 2 ' style=' height : 5px；'/TD/tr/tr TD align='右'用户名：/TD TD AsP : TextBox ID=' TxTussername ' runat=' server '/AsP : TextBox/TD/tr TD align=' right '密码：/TD TD asp:文本框ID=' txt Password '文本模式=' Password ' runat=' server '/ASP :文本框/TD/tr TD align=' right '验证码：/TD TD AsP : TextBox ID=' txt code ' Style=' width : 88px；'runat=' server '/AsP : TextBox img src=' Http : COde。aspx ' id=' IMGRndCOde ' style='垂直-中间对齐3360；'onclick=“更改代码(this)；”alt='验证码标题='看不清，点击图片更换图片//TD/tr/tr TD col span=' 2 ' align=' center ' a onclick=' check log in()' id=' alog in '登录/a img id=' LoAding ' src=' http : IMages/LoAding 04。gif ' alt='正在登录标题='正在登录./br/span id=' show mes '/span/TD/tr/table/div！-登录窗口： end-div class=' main ' ASP :内容占位符ID=' main content ' runat=' server '/div div class=' clear '/div/div class=' footer ' a href=' http://www。cn博客。com/Ferry/' By Ferry/a/div/表单/正文/html 2)实现遮罩层和弹出登录界面的层的射流研究…文件脚本/common.js的代码，注意，里面硬写了一些母版页站点。母版中的元素的身份

$(function () { var screenwidth，screenheight，mytop，getPosLeft，getPosTop screenwidth=$(window).宽度();screenheight=$(窗口)。高度();//获取滚动条距顶部的偏移mytop=$(文档)。滚动顶部()；//计算弹出层的左getPosLeft=屏幕宽度/2-200;//计算弹出层的top getPosTop=屏幕高度/2-150;//css定位弹出层$('#divLoginWindow ').css({ 'left': getPosLeft，' top ' : getPosTop })；//当浏览器窗口大小改变时$(窗口)。resize(function(){ screenwidth=$(window)).宽度();screenheight=$(窗口)。高度();mytop=$(文档)。滚动顶部()；getPosLeft=screenwidth/2-200；getPosTop=屏幕高度/2-150；$('#divLoginWindow ').css({ 'left': getPosLeft，' top ' : getPosTop my top })；});//当拉动滚动条时，弹出层跟着移动$(窗口)。scroll(function(){ screenwidth=$(window)).宽度();screenheight=$(窗口)。高度();mytop=$(文档)。滚动顶部()；getPosLeft=screenwidth/2-200；getPosTop=屏幕高度/2-150；$('#divLoginWindow ').css({ 'left': getPosLeft，' top ' : getPosTop my top })；});//点击链接弹出登录窗口$('#popup ').单击(function () { $('#divLoginWindow ')).fadeIn('慢');//切换('慢');$('#txtUserName ').焦点();//获取页面文档的高度var docheight=$(文档)。高度();//追加一个层，使背景变灰$(“正文”).追加(' div id='灰色背景'/div ')；$("#灰色背景").css({ '不透明度' : '0.5 ','高度： docheight })；返回false })；//点击关闭按钮$('#closeBtn ').单击(function () { $('#divLoginWindow ')).fadeOut("慢");////hide()；//删除变灰的层$("#灰色背景").移除();返回false })；});//更换验证码图片函数更改代码(obj){ obj。src='代码。aspx？数学。random()；} 3)点击【登录】实现创建交互式、快速动态网页应用的网页开发技术登录验证功能的射流研究…文件脚本/login.js的代码

定义变量计数=0;$(文档)。ready(function(){ $(“# loading”)).hide()})；函数CheckLogin(){ $(' # alog in ').hide()；$("#正在加载")。show()；var TxtCode=$(' # TxtCode ')；var txt名称=$(' # txtUserName ')；var txtPwd=$(' # txtPassword ')；$.Ajax({ URL : ' CheckLogon。aspx？代码=' TxTcode。val()' Name=' TxTname。val()' Pwd=' TxTpwd。val()，类型：“post”，数据类型：“text”，成功：函数(返回值){ if (returnValue！='false') { $('#popup ').hide()；$('#showMes ').hide()；$('#loginSuccess ').html(返回值，您好!');$('#divLoginWindow ').移除();$("#灰色背景").移除();$('#showMes ').hide()；} else { count=count 1；$("#正在加载")。hide()；$('#alogin ').show()；$('#showMes ').show()；$('#showMes ').html(“”字体颜色=红色登录失败，请检查后重试！("计数"次)/font ')；} } })} 4)请求的CheckLogin.aspx的后台代码，前台清除剩页命令一行

使用系统；使用系统。数据；公共部分类检查登录：系统网络。用户界面。第{页受保护的无效页面_加载(对象发送者，事件参数e) {尝试{字符串strCode=Request .查询字符串['代码'];字符串strName=请求。查询字符串['名称'];字符串=请求查询字符串[' Pwd ']；if (strCode！=会话['代码']。ToString()){ 0响应。写(' false ')；} else { DAO .SqlHelper助手=新DAO .SqlHelper()；数据表dt=助手.填充数据表（字符串。格式('从客户端选择用户名、真名，其中用户名='{0} '和密码='{1} ',用户名、密码);if (dt！=空dt .行数。计数0) {会话['TrueName']=dt .行[0]['TrueName'].ToString()；回应。写(dt .行[0]['TrueName'].ToString())；} else { Response .写(' false ')；} } }捕获{响应。写(' false ')；} }}源码下载：jQuery AJAX实现遮罩层登录验证界面

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