Implementation of jquery + Ajax User Logon

OK. paste a few images first.

The general process is that the user clicks the logon link in the upper-right corner of the page and then the DIV simulation window pops up. This window calls the login. ASPX page through IFRAME, and the user enters the user name

After the password and verification code, the jqueryCodePost to the login. ashx page for processing. The login. ashx page can be a simple ASPX page.

Of course, you can also use loginprocess. aspx. After the login. ashx page is processed, the result is returned to the login. ASPX page for processing. The result variable is used to receive the result.

If 1 is returned, the simulated window is closed.

Code snippet for calling the Home Page:

Copy code The Code is as follows: <asp: hyperlink id = "lnklogin" runat = "server" navigateurl = "#"> logon </ASP: hyperlink>

<Script language = "JavaScript" type = "text/JavaScript">
$ ('# <% = This. lnklogin. clientid %>'). Click (
Function (){
Jbox. Open ('iframe-jboxid', 'iframe', 'login. aspx ', 'user Logon
', 'Width = 400, Height = 250, center = true, draggable = true, model = true ');
});
</SCRIPT>

Login. aspx code: Copy code The Code is as follows: <Form ID = "form1" onsubmit = "Return false;">
<Table id = "login-table">
<Tr>
<TD width = "60"> Student ID: </TD>
<TD> <input class = "textbox" type = "text" style = "width: 160px;" id = "txtusername"
Maxlength = "9" onblur = "checkusername ()" onclick = "$. Trim (this. Value)"/> <span> </span>
</TD>
</Tr>
<Tr>
<TD width = "60"> password: </TD>
<TD> <input class = "textbox" type = "password" style = "width: 160px;" id = "txtuserpwd"
Onblur = "checkuserpwd ()" onclick = "$. Trim (this. Value)"/> <span> </span>
</TD>
</Tr>
<Tr>
<TD width = "60"> Verification Code: </TD>
<TD> <input class = "textbox" type = "text" style = "width: 160px;" maxlength = "5"
Id = "txtcheckcode" onblur = "checkcheckcode ()" onclick = "$. Trim (this. Value)"/> <span>
</Span>
</TD>
</Tr>
<Tr>
<TD width = "60"> </TD>
<TD> <Div style = "color: #808080;"> the entered characters are case-insensitive. </div> <br/>

<A href = "#" id = "change_image"> you cannot see the image clearly. Change it to another one. </a> </TD>
</Tr>
<Tr>
<TD width = "60"> </TD>
<TD> <input type = "image" src = "app_themes/images/btn_login.jpg" id = "btnlogin"
Alt = "Log on now" style = "border: 0;"/> </TD>
</Tr>
</Table>
</Form>

Jquery code:Copy code The Code is as follows: <script language = "JavaScript" type = "text/JavaScript">
$ (Document). Ready (function (){
// Verification Code Update
$ ('# Change_image'). Click (
Function (){
$ ('# Imgcheckcode'). ATTR ('src', 'checkcode. aspx? '+ Math. Random ());
});
// Key code
$ ("# Btnlogin"). Click (function (){
If (checkusername () & checkuserpwd () & checkcheckcode ())
{
VaR DATA = {
Username: $ ('# txtusername'). Val (),
Userpwd: $ ('# txtuserpwd'). Val (),
Checkcode: $ ('# txtcheckcode'). Val ()
};
// Submit the data to the login. ashx page for processing.
$. Post ("ajax/login. ashx", Data, function (result ){
If (result = "1") // login successful
{
Alert ("Logon successful! You can perform other operations! ");
// Close the simulated window
Window. Parent. Window. jbox. Close ();
}
Else if (result = "2") // Incorrect verification code
{
$ ('# Txtcheckcode'). Next ("span" ).css ("color", "Red"). Text ("*
Incorrect verification code ");
}
Else
{
Alert ("Logon Failed! Please try again ");
}
});
}
Else
{
Checkusername ();
Checkuserpwd ();
Checkcheckcode ();
}
});
});

// Check the username
Function checkusername ()
{
If ($ ("# txtusername"). Val (). Length = 0)
{
$ ("# Txtusername"). Next ("span" ).css ("color", "Red"). Text ("* username is not blank ");
Return false;
}
Else
{
VaR Reg =/^ \ D {9} $ /;
If (! Reg. Test ($ ('# txtusername'). Val ()))
{
$ ('# Txtusername'). Next ("span" ).css ("color", "Red"). Text ("* correct format
For example: 030602888 ");
Return false;
}
Else
{
$ ("# Txtusername"). Next ("span" ).css ("color", "Red"). Text ("");
Return true;
}
}
}
// Check the PWD
Function checkuserpwd ()
{
If ($ ('# txtuserpwd'). Val (). Length = 0)
{
$ ('# Txtuserpwd'). Next ("span" ).css ("color", "Red"). Text ("* password not blank ");
Return false;
}
Else
{
$ ('# Txtuserpwd'). Next ("span" ).css ("color", "Red"). Text ("");
Return true;
}
}
// Check the check code
Function checkcheckcode ()
{
If ($ ('# txtcheckcode'). Val (). Length = 0)
{
$ ('# Txtcheckcode'). Next ("span" ).css ("color", "Red"). Text ("* The verification code is not empty ");
Return false;
}
Else
{
$ ('# Txtcheckcode'). Next ("span" ..css ("color", "Red"). Text ("");
Return true;
}
}
</SCRIPT>

Login. ashx code:Copy codeThe Code is as follows: using system;
Using system. collections;
Using system. Data;
Using system. LINQ;
Using system. Web;
Using system. Web. Services;
Using system. Web. Services. Protocols;
Using system. xml. LINQ;
Using system. Data. sqlclient;
Using system. Web. sessionstate; // supports the reference required by the session.

Namespace website. Ajax
{
[WebService (namespace = "http://tempuri.org/")]
[Webservicebinding (conformsto = wsiprofiles. basicprofile1_1)]
Public class login: ihttphandler, irequiressessionstate
{
Public void processrequest (httpcontext context)
{
Context. response. contenttype = "text/plain ";
String checkcode = "";
If (context. session ["checkcode"]! = NULL)
{
Checkcode = convert. tostring (context. session ["checkcode"]). tolower ();
}
If (context. Request. Form ["checkcode"]. tolower () = checkcode)
{
Using (sqlconnection conn = new
Sqlconnection (sqlhelper. studentconnectionstring ))
{
String SQL = "select ID, stunumber, userpassword, realname from
T_stuuser where stunumber = @ username and userpassword = @ userpwd ";
Sqlcommand cmd = new sqlcommand (SQL, Conn );
Sqlparameter pusername = cmd. Parameters. Add ("@ username ",
Sqldbtype. varchar, 30 );
Sqlparameter puserpwd = cmd. Parameters. Add ("@ userpwd ",
Sqldbtype. varchar, 150 );
Pusername. value = context. Request. Form ["username"];
Puserpwd. value = Common. MD5 (context. Request. Form ["userpwd"]);
Conn. open ();
Sqldatareader SDR =
Cmd. executereader (commandbehavior. closeconnection );
If (SDR. Read ())
{
Context. session ["userid"] = convert. tostring (SDR ["ID"]);
Context. session ["stuname"] =
Convert. tostring (SDR ["realname"]);
Context. session ["stunumber"] =
Convert. tostring (SDR ["stunumber"]);
Context. response. Write ("1"); // login successful
}
Else
{
Context. response. Write ("0"); // Logon Failed, incorrect username or password
}
}
}
Else
{
Context. response. Write ("2"); // The verification code is incorrect.
}
}

Public bool isreusable
{
Get
{
Return false;
}
}
}
}