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

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

您可能感兴趣的文章: