In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-01-19 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/02 Report--
This article introduces you how to log in to ajax in the jQuery div pop-up layer, the content is very detailed, interested friends can refer to, hope to be helpful to you.
Ajax login of div pop-up layer (Jquery version)
This time I wanted to do a web version of simple database management, but now I only make the login interface because of the limited technology. Last time, I wrote a simple query analyzer for winform, address: my simple SQL query analyzer.
This time the main sharing is div+css+jquery, you can change it into the login you want, and change it at will! Background code due to time constraints, not completed, there is some chaos, focus on sharing interface, but also hope to understand!
The page is initialized and the interface is shown in the figure:
When the Server name text box gets the focus, the interface is shown in the figure (here you can change it to the verification code for your login):
You can load a list of SQL Server services, which is also a way to give quiet thoughts in my simple SQL query Analyzer comments. Thank you very much!
The load list is shown in the following figure:
You can click to add it to Server name at will, as shown in the screenshot when logging in:
The text box verification is all written! There is also Authentication verification, windows verification below the Login,Password text box is prohibited! Due to time reasons, not on the picture.
Demo.html (all foreground codes, js/css is not stored in separate files)
DataBase Test Demo body {margin:0 auto;font-family:Verdana;font-size:12px;} .top {margin:0 auto; width:100%; text-align:center; margin-top:20px;} # browser {display:none } DataBase Test Demo SQL Server DataBases Test # greybackground {background: # 000 Display: block;z-index: 100% width: 100% control position: absolute;top: 0 left: 0;} # login {margin:0 auto;width:420px;height:auto;border:solid 1px # ccc;position:absolute;z-index:200;background-color:#fff;} # login. Picture {width:420px;height: 29pxmith login imageVere url (images/top_bg.gif); border-bottom:solid 1px # ccc;} # login .leav.left {float:left;line-height:29px Margin-right:2px;padding-left:10px; color:#5aa608;} # login .heard .right {float:right;line-height:29px;margin-right:5px;} # login .heard .right a {color:#999;text-decoration:none;} # login .heard .right a:hover {color:red;text-decoration:underline;} # login .content {width:420px; height:200px;} # login .content li {list-style:none; padding:5px 0px 5px 30px } # login .content .top {width:100%; margin-top:5px;height:30px;line-height:30px;} # login .content .top .left {float:left;width:120px; text-align:right;} # login .content .top .right {float:right;width:280px;text-align:right;padding-right:20px;} # login input,#login,select,#login,button {font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100% } # login input {width: 80% B3B3B3 padding: # B3B3B3 # EAEAEA # EAEAEA # B3B3B3borderAfter style: solid;border-width: 1pxborderrapine;} # login select {width: 86% 7px 7px padding: 7px 7px 6pxborderripcolor: # B3B3B3 # EAEAEA # EAEAEA # B3B3borderAfter: solid;border-width: 1pxcolorusblack } # login button,#login. Btn-submit,#login. Button, # login. Btn-submit:focus,#login. Button: focus,.btn-submit,.button {border-left: 1px solid # C6C6C6; border-right: 1px solid # DDDDDD;border-top: 1px solid # DDDDDD;border-bottom: 1px solid # C6C6C6; cursor:pointer;width:auto;margin:0 10px 00 Background:url (images/button.png) # e5e3e3 repeat-x 00; height:32px;padding-left:12px;padding-right: 12pxt paddling login top: 6px;} # login button:hover,#login. Btn-submit:hover,.button:hover,.btn-submit:hover {background-image:none;} # login. Btn-submit,#login. Btn-submit:focus,.btn-submit {width:auto;border-color:#5C91A4 # 2B7089 # 1A6480 # 2A6F89witch backgroundimageRod url (images/button_highlight.png) Background-color:#4e85bb;color:#fff;} # login. Bottom-btn {width:90%; margin:0 auto; padding-top:7px; border-top:1px # ccc solid; margin-top:5px;} # layer {position:relative;} # poper {position:absolute;z-index:10;display:none;left:39px;border:solid 1px # ccc; background-color:#fff;} # poper .heard {height:25px;line-height:25px; width:100%;text-align:right } # poper .heard a {color:#999;text-decoration:none;} # poper .heard a:hover {color:red;text-decoration:underline;} # poper .first {height:30px;line-height:30px; width:100%;text-align:center; color:#5aa608;} # poper .first a {color:#5aa608;text-decoration:underline;} # poper .second {height:20px;line-height:20px; width:100%;text-align:left; margin-left:10px } # poper .second a {color:#999; text-decoration:none;} # poper .second a:hover {color:#5aa608; text-decoration:underline } Connect to Serverclose Server name: close Click to load the list of SQL Server services Authentication:Windows AuthenticationSQL Server Authentication Login: Password: $(document) .ready (function () {$("# browser"). Treeview () $("# selectAuthentication") .change (function () {if ($(this). Val () = "windows") {$("# txtUserName,#txtPassword") .css ("background-color", "# eee"); $("# txtUserName,#txtPassword") .attr ("disabled", "disabled") } else {$("# txtUserName,#txtPassword"). Css ("background-color", "# fff"); $("# txtUserName,#txtPassword"). RemoveAttr ("disabled");}}); $("# txtServer") .focus (function () {$("# poper"). FadeIn ("fast");}) Css ({"top": $("# txtServer") .outerHeight () + 1, "width": $("# txtServer") .outerWidth ()}); $("# layer_close") .click (function () {$(this) .parent () .parent () .fadeOut ("fast");}) Click ("# loadServer") .click (function () {$.ajax ({type: "get", dataType: "text", timeout: 300000, url: "ashx/Handler.ashx", data: "flag=server" BeforeSend: function () {$("# loadServer") .fadeOut ("fast") $("# poper. First") .html ("
Loading, please wait a moment. ") }, success: function (data) {if (data = = "error") {$("# poper. First") .html ("Service list failed to load, please refresh and reload") } else if (data = = "empty") {$("# poper .first") .html ("No data, please fill in manually");} else {$("# poper .first") .remove (); $("# poper") .append (data) Alink ();}}, error: function () {$("# poper. First") .html ("system error, please contact the administrator!") ) $("# btnConnect") .click (function () {if ($("# selectAuthentication"). Val () = = "sql") {/ / SQL Server Authentication if ($("# txtServer"). Val () .length
< 1) { $("#message").css("color", "red"); $("#message").html("请输入Server name"); } else if ($("#txtUserName").val().length < 1) { $("#message").css("color", "red"); $("#message").html("请输入Login"); } else if ($("#txtPassword").val().length < 1) { $("#message").css("color", "red"); $("#message").html("请输入Password"); } else { $.ajax({ type: "get", dataType: "text", timeout: 300000, url: "ashx/Handler.ashx", data: "flag=login&sqlServer=" + encodeURIComponent($("#txtServer").val()) + "&user=" + encodeURIComponent($("#txtUserName").val()) + "&password=" + encodeURIComponent($("#txtPassword").val()), beforeSend: function() { $("#message").css("color", "#5aa608"); $("#message").html("Verifying, please wait a moment. ") ;}, success: function (data) {if (data = = "True") {$("# message") .html (""); hideLogin (); $("# browser") .fadeIn ("fast") }, error: function () {$("# message") .css ("color", "red"); $("# message") .html ("login failed");});}) $(function () {var screenwidth, screenheight, mytop, getPosLeft, getPosTop screenwidth = $(window). Width (); screenheight = $(window). Height (); / / get the offset of the scroll bar from the top mytop = $(document). ScrollTop (); / / calculate the left getPosLeft = screenwidth / 2-200 of the pop-up layer / / calculate top getPosTop = screenheight / 2-150 of the pop-up layer; / / css locate the pop-up layer $("# login"). Css ({"left": getPosLeft, "top": getPosTop}); / / when the browser window size changes $(window) .resize (function () {screenwidth = $(window) .width () Screenheight = $(window). Height (); mytop = $(document). ScrollTop (); getPosLeft = screenwidth / 2-200; getPosTop = screenheight / 2-150; $("# login") .css ({"left": getPosLeft, "top": getPosTop + mytop});}) / / when the scroll bar is pulled, the pop-up layer moves $(window) .layers (function () {screenwidth = $(window). Width (); screenheight = $(window). Height (); mytop = $(document). ScrollTop (); getPosLeft = screenwidth / 2-200; getPosTop = screenheight / 2-150 Css ({"left": getPosLeft, "top": getPosTop + mytop});}); / / Click the close button $("# login_close") .click (function () {hideLogin ();}) ("# btnOK") .click (function () {$("# login") .fadeOut ("slow"); $("# browser") .fadeIn ("slow"); / / delete the grayed out layer $("# greybackground") .remove (); return false;}) $.get ("ashx/Handler.ashx?flag=islogin", function (data) {if (data = = "True") {/ / No login, display login box hideLogin ();} else {showLogin ();});}) Function showLogin () {/ / shows the landing box $("# login") .fadeIn ("slow"); / / gets the height of the page document var docheight = $(document) .height (); / / appends a layer to make the background gray $("body") .append ("") $("# greybackground"). Css ({"opacity": "height": docheight}); return false;} function hideLogin () {$("# login"). FadeOut ("slow"); / / remove the grayed out layer $("# greybackground"). Remove (); return false } function alink () {/ / append click event $("# poper .second a") .each (function () {$(this) .click (function () {var a = $(this) .html (); $("# txtServer") .val (a);}
Handler.ashx
Using System; using System.Web; using System.Collections.Generic; using System.Text; using System.Web.SessionState; public class Handler: IHttpHandler,IRequiresSessionState {public void ProcessRequest (HttpContext context) {context.Response.ContentType = "text/plain"; string tempValue = string.Empty; if (context.Request ["flag"] = = null) context.Response.Write ("error") Else {string flag = context.Request ["flag"]; switch (flag) {case "server": tempValue = this.GetServers (); break Case "islogin": tempValue = (context.Session ["login"]! = null). ToString (); / / determine whether to log in to SQL break; case "login": tempValue = IsLogin (context); break Default: tempValue = "error"; break;}} context.Response.Write (tempValue) } / load SQL Server service list / private string GetServers () {IList list = Common.GetServers (); if (list = = null | | list.Count = = 0) return "empty"; StringBuilder sb = new StringBuilder () Foreach (string s in list) {sb.AppendFormat ("{0}", s);} return sb.ToString () } / sign in to SQL Server / private string IsLogin (HttpContext context) {if (context.Request ["user"] = = null | | context.Request ["password"] = = null) {context.Session ["login"] = "success"; return "" } else {string server = HttpUtility.UrlDecode (context.Request ["sqlServer"]); string user = HttpUtility.UrlDecode (context.Request ["user"]); string password = HttpUtility.UrlDecode (context.Request ["password"]); string sqlConstring If (Common.IsLogin (server, user, password, out sqlConstring)) {context.Session ["login"] = sqlConstring; return "True";} else {return "False" } public bool IsReusable {get {return false;}
Common.cs
Using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data.Sql; using System.Data.SqlClient; using System.Data / Summary description for Common / public class Common {public Common () {/ TODO: Add constructor logic here / /} / load SQL service list / public static IList GetServers () {IList list = new List () SqlDataSourceEnumerator sse = SqlClientFactory.Instance.CreateDataSourceEnumerator () as SqlDataSourceEnumerator; if (sse = = null) return null; DataTable dt = sse.GetDataSources (); foreach (DataRow dr in dt.Rows) {string server = dr ["ServerName"] as string; string instance = dr ["InstanceName"] as string If (string.IsNullOrEmpty (instance) | | instance.ToUpper () = = "MSSQLSERVER") list.Add (server); else list.Add (server + @ "\" + instance);} return list } / SQL Server Authentication / SQL service / username / / password / database connection string / public static bool IsLogin (string server,string user,string password,out string sqlConstring) {sqlConstring = string.Format ("Data Source= {0}; Initial Catalog=master;Persist Security Info=True;User ID= {1}) Password= {2} ", server, user, password); return SQLHelper.LoginSQL (sqlConstring);}}
SQLHelper.cs
Using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data; using System.Data.SqlClient / Summary description for SQLHelper / public class SQLHelper {public SQLHelper () {/ TODO: Add constructor logic here / /} / decide whether to log in to SQL Server / public static bool LoginSQL (string sqlConstring) {bool isLogin = false Using (SqlConnection conn = new SqlConnection (sqlConstring)) {conn.Open (); if (conn.State.ToString (). ToLower () = "open") isLogin = true; return isLogin } on how to do jQuery div pop-up layer of ajax login to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.