Jquery ajax User Logon instance Summary

Source: Internet
Author: User
Tags mootools

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)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.