Requirement: perform an ajax Login
Main technical points: jquery ajax and blur events
When the user name input box loses focus, the blur event is triggered and an ajax request is made to obtain the result (true or false). If the request result is true, replace the image in the user name input box with "OK" and output text: Congratulations, this account can be registered; otherwise, it will be replaced with "no" and output text: the account already exists.
Source code:
Front-end:Copy codeThe Code is as follows: <% @ Page Language = "C #" MasterPageFile = "~ /Top_Down.master "AutoEventWireup =" true "CodeFile =" RegisterMember. aspx. cs "Inherits =" Member_RegisterMember "Title =" registered user "%>
<Asp: Content ID = "Content1" ContentPlaceHolderID = "head" Runat = "Server">
<Link href = "../Admin/css/template.css" rel = "stylesheet" type = "text/css"/>
<Link href = "../Admin/css/validationEngine.jquery.css" rel = "stylesheet" type = "text/css"/>
<Script src = "../Admin/scripts/jquery-1.7.1.min.js" type = "text/javascript"> </script>
<Script src = "../js/jquery. validationEngine. js" type = "text/javascript"> </script>
<Script src = "../Admin/scripts/isValid. js" type = "text/javascript"> </script>
<Script src = "../js/ages/jquery. validationEngine-zh_CN.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
Var IsCheck = false;
$ (Function (){
// Binds form submission and fields to the validation engine
$ ("# Form1"). validationEngine ();
// Verify when the mouse loses focus
$ ("# TxtUserName"). blur (function (){
$. Ajax ({
Url: "Data/GetMemberInfo. ashx? Method = CheckExistUserName ",
Data: {"username": $ ("# txtUserName"). val ()},
Type: "post ",
Success: function (text ){
$ ("# TdUser"). empty (); // clear the content
Var item;
If (text = "True "){
Item = ' congratulations, you can register this account! ';
IsCheck = true;
}
Else
Item = ' sorry, this account has already been registered! ';
$ ("# TdUser"). append (item );
}
});
});
});
Function CheckForm1 ()
{
If (IsCheck)
{
Form1.submit ();
}
Else {
Alert ("verify User Name ");
}
}
</Script>
</Asp: Content>
<Asp: Content ID = "Content2" ContentPlaceHolderID = "ContentPlaceHolder1" Runat = "Server">
<Form id = "form1" action = "Data/GetMemberInfo. ashx? Method = SaveMemberInfo "method =" post ">
<Div class = "content">
<Div class = "left_side">
<Div class = "logo_bottom"> </div>
</Div>
<Div class = "right_side zhuce">
<Div class = "zhuce_title"> <p class = "hide"> registering a new user </p> </div>
<Div class = "zhuce_p">
<Table width = "578" class = "zc_table1">
<Tr>
<Td width = "93" class = "zc_tar"> User name: </td>
<Td width = "200" class = "zc_tal"> <input type = "text" class = "zc_input1 validate [required, custom [LoginName] text-input "name =" txtUserName "id =" txtUserName "/> <! -- LoginName -->
</Td>
<Td width = "269" class = "zc_font" id = "tdUser"> </td>
</Tr>
<Tr>
<Td class = "zc_tar"> password: </td>
<Td class = "zc_tal"> <input type = "password" class = "zc_input2 validate [required, custom [LoginPwd] text-input "id =" txtPwd "name =" txtPwd "/> </td>
<Td class = "zc_font"> </td>
</Tr>
<Tr>
<Td class = "zc_tar"> Confirm Password: </td>
<Td class = "zc_tal"> <input type = "password" class = "zc_input3 validate [required, equals [txtPwd] text-input"/> </td>
<Td class = "zc_font"> </td>
</Tr>
<Tr>
<Td class = "zc_tar"> E-mail: </td>
<Td class = "zc_tal"> <input type = "text" class = "zc_input4 validate [required, custom [email] text-input "name =" txtEmail "id =" txtEmail "/> </td>
<Td class = "zc_font"> </td>
</Tr>
<Tr>
<Td class = "zc_tar"> Verification Code: </td>
<Td class = "zc_tal" colspan = "2"> <input type = "text" class = "zc_input5" name = "txtCheckCode" id = "txtCheckCode"/> </td>
</Tr>
<Tr> <td> </tr>
<Tr>
<Td colspan = "3" align = "center"> <a href = "javascript: CheckForm1 ()"> </a> </td>
</Tr>
</Table>
</Div>
</Div>
</Div>
</Form>
</Asp: Content>
Background events:Copy codeThe Code is as follows: <% @ WebHandler Language = "C #" Class = "GetMemberInfo" %>
Using System;
Using System. Web;
Using Common;
Using czcraft. Model;
Using czcraft. BLL;
Using System. Web. SessionState;
Public class GetMemberInfo: IHttpHandler, IRequiresSessionState
{
//// Record logs
Private static readonly log4net. ILog logger = log4net. LogManager. GetLogger (System. Reflection. MethodBase. GetCurrentMethod (). DeclaringType );
Public void ProcessRequest (HttpContext context)
{
String methodName = context. Request ["method"];
If (! String. IsNullOrEmpty (methodName ))
CallMethod (methodName, context );
}
/// <Summary>
/// Call different methods based on business needs
/// </Summary>
/// <Param name = "Method"> Method </param>
/// <Param name = "context"> context </param>
Public void CallMethod (string Method, HttpContext context)
{
Switch (Method)
{
Case "CheckExistUserName ":
CheckExistUserName (context );
Break;
// Case "SearchMember ":
// SearchMember (context );
// Break;
Case "SaveMemberInfo ":
SaveMemberInfo (context );
Break;
// Case "RemoveMember ":
// RemoveMember (context );
// Break;
// Case "GetMember ":
// GetMember (context );
// Break;
Default:
Return;
}
}
/// <Summary>
/// Verify whether the account exists
/// </Summary>
/// <Param name = "context"> </param>
Public void CheckExistUserName (HttpContext context)
{
String username = context. Request ["username"];
If (Tools. IsValidInput (ref username, true ))
{
Context. Response. Write (new memberBLL (). CheckExistUserName (username ));
}
}
/// <Summary>
/// Save user information
/// </Summary>
/// <Param name = "context"> </param>
Public void SaveMemberInfo (HttpContext context)
{
Try
{
// Read the form
String txtUserName = context. Request ["txtUserName"];
String txtPwd = context. Request ["txtPwd"];
String txtEmail = context. Request ["txtEmail"];
String txtCheckCode = context. Request ["txtCheckCode"];
// Verification Code
If (! TxtCheckCode. Equals (context. Session ["checkcode"]. ToString ()))
{
Return;
}
// String SQL Injection Detection
If (Tools. IsValidInput (ref txtUserName, true) & Tools. IsValidInput (ref txtPwd, true) & Tools. IsValidInput (ref txtEmail, true ))
{
Member info = new member ();
Info. username = txtUserName;
Info. password = txtPwd;
Info. Email = txtEmail;
Info. states = "0 ";
If (new memberBLL (). AddNew (info)> 0)
{
SMTP smtp = new SMTP (info. Email );
String webpath = context. Request. Url. Scheme + ": //" + context. Request. Url. Authority + "/Default. aspx ";
Smtp. Activation (webpath, info. username); // send an Activation email
JScript. AlertAndRedirect ("Registered User successful !! "," ../Default. aspx ");
}
Else {
JScript. AlertAndRedirect ("User Registration failed! "," ../Default. aspx ");
}
}
}
Catch (Exception ex)
{
Logger. Error ("Error! ", Ex );
}
}
Public bool IsReusable {
Get {
Return false;
}
}
}