首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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实现登录验证的全部内容，希望对大家的学习有所帮助

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

- Author -

Ferry

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery简单体验
Jan 10 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
Jan 24 Javascript
jquery移动listbox的值原理及代码
May 03 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 Javascript
深入理解Java线程编程中的阻塞队列容器
Dec 07 Javascript
jQuery+formdata实现上传进度特效遇到的问题
Feb 24 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
May 31 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 Javascript
VUE 自定义组件模板的方法详解
Aug 30 Javascript
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
GCN(1) 裁剪图片(1) PIL(1) 信号同步(1) 鲲鹏(1) 验证码(1) 进度条(1) Pytesseract(1) Python(3) Flask(2)
You might like
晶体管来复再生式二管收音机
2021/03/02 无线电
基于mysql的论坛（3）
2006/10/09 PHP
dedecms防止FCK乱格式化你的代码的修改方法
2007/03/17 PHP
php分页示例代码
2007/03/19 PHP
PHP判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
PHP编码规范的深入探讨
2013/06/06 PHP
ThinkPHP 3.2 数据分页代码分享
2014/10/14 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
jquery实现智能感知连接外网搜索
2013/05/21 Javascript
jQuery中:disabled选择器用法实例
2015/01/04 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
JavaScript中神奇的call()方法
2015/03/12 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
python读取html中指定元素生成excle文件示例
2014/04/03 Python
Django实现快速分页的方法实例
2017/10/22 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
总结python 三种常见的内存泄漏场景
2020/11/20 Python
Hanro官网：奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
Silk Therapeutics官网：清洁、抗衰老护肤品
2020/08/12 全球购物
什么是java序列化，如何实现java序列化
2012/11/14 面试题
《藏戏》教学反思
2014/02/11 职场文书
认购协议书范本
2014/04/22 职场文书
毕业大学生自荐信
2014/06/17 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
Python答题卡识别并给出分数的实现代码
2021/06/22 Python
详解Go语言中配置文件使用与日志配置
2022/06/01 Golang