Requirements: do an AJAX login
Main technical points: jquery Ajax and Blur events
When the user name input box loses the focus, it triggers the Blur event, then makes an AJAX request, obtains the result (true or false), and if the request result is true, replaces the user name input box picture with OK and outputs the text: Congratulations, this account can be registered, Otherwise, replace the image no, and output text: Account already exists
Source:
Front desk:
Copy Code code 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/languages/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 ()//empty content
VAR item;
if (text== "True") {
item= ' Congratulations, this account can register! ';
Ischeck=true;
}
Else
item= ' Sorry, this account number has already been registered! ';
$ ("#tdUser"). Append (item);
}
});
});
});
function CheckForm1 ()
{
if (Ischeck)
{
Form1.submit ();
}
else{
Alert ("Please 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" > Register new User </p></div>
<div class= "Zhuce_p" >
<table width= "578" class= "Zc_table1" >
<tr>
<TD width= "class=" "Zc_tar" > Username:</td>
<TD width= "class=" zc_tal "><input type=" text "class=" ZC_INPUT1 Validate[required,custom[loginname]] Text-input "Name=" txtUserName "id=" txtUserName "/><!--loginname-->
</td>
<TD width= "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> </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 Code code 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 log
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>
Invoke different methods based on business requirements
</summary>
<param name= "Method" > Methods </param>
<param name= "Context" > Contexts </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 that the account is present
</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
{
Form Read
String txtUserName = context. request["txtUserName"];
String txtpwd = context. request["Txtpwd"];
String Txtemail = context. request["Txtemail"];
String Txtcheckcode = context. request["Txtcheckcode"];
Verify Code Checksum
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 activation message
Jscript.alertandredirect ("Registered user success!!", ".. /default.aspx ");
}
else {
Jscript.alertandredirect ("Registered user failed!", "."). /default.aspx ");
}
}
}
catch (Exception ex)
{
Logger. Error ("Wrong!", ex);
}
}
public bool IsReusable {
get {
return false;
}
}
}