The ajax login method is simple. You only need to simply use jquery post to send data and then jump to the specified Page Based on the returned value or return the successful login information to the specified id.
After the password and verification code, the jQuery code on the Login. aspx page is post to the Login. ashx page for processing. The Login. ashx page is 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:
| The Code is as follows: |
Copy code |
<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 the Code 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 the Code 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 the Code 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;
}
}
}
} |
Advantages and disadvantages of jquery + ajax/"target =" _ blank "> Analysis of jquery ajax
Advantages
Small. After compression, the code is only 20 KB (94 KB without compression code ).
Convenience of Selector and DOM operations: Comparison of jQuery Selector and mootools's Element. Selectors. js, CSS Selector and XPath Selector (deleted after 1.2)
Chaining: always returns a jQuery object, which can be operated continuously.
Documentation is complete and easy to use (each API has a complete example, which is incomparable to other frameworks currently), and there are many other documents and books on the Internet.
JQuery is also widely used, including google code.
Use jQuery site: http://docs.jquery.com/Sites_Using_jQuery
Core development teams and core personnel: John Resig.
Simple and short syntax, easy to remember.
Scalability: There are a lot of user-developed plug-ins available (http://jquery.com/plugins)
JQuery UI (http://jquery.com/plugins/, Based on jquery, but independent of the core jquery) continues to develop.
Friendly and active community: google groups: http://docs.jquery.com/Discussion
There are many convenient methods for event processing, such as click, rather than a single addEvent.
Disadvantages
Because the design concept is efficient and concise, there is no object-oriented extension. The design concept is different from that of Mootools.
The speed of CSS Selector is a little slow (but the speed has been greatly improved)
