Implementation of Jquery+ajax User Login function _ Practical skills

OK, first to paste a few pictures of the effect.

The approximate process is the user clicks on the page in the upper right corner of the login link and then pop-up Div Simulation window, the window through the IFRAME Call login.aspx page, user input user name

Password and Authenticode, the Login.aspx page of the jquery code post to the Login.ashx page processing, login.ashx page can be considered as a simple ASPX page.

Of course, you can also use loginprocess.aspx. Login.ashx page processing, return the results to login.aspx page processing, result variable with and receive results.

If 1 indicates a successful login, the simulation window is closed.

Main Page invoke code fragment:

Copy Code code as follows:

<asp:hyperlink id= "Lnklogin" runat= "Server" navigateurl= "#" > Login </asp:HyperLink>

<script language= "javascript" type= "Text/javascript" >
$ (' #<%=this.lnklogin.clientid%> '). Click (
function () {
Jbox.open (' Iframe-jboxid ', ' iframe ', ' login.aspx ', ' User login
', ' width=400,height=250,center=true,draggable=true,model=true ');
} );
</script>

Login.aspx Code:

Copy Code code as follows:

<form id= "Form1" onsubmit= "return false;" >
<table id= "Login-table" >
<tr>
&LT;TD width= > School No.:</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>
&LT;TD width= > Password:</td>
<td><input class= "textbox" type= "password" style= width:160px; "Id=" Txtuserpwd "
Onblur= "Checkuserpwd ()" onclick= "$.trim (this.value)"/><span></span>
</td>
</tr>
<tr>
&LT;TD width= > 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>
&LT;TD width= "></td>"
<td><div style= "color: #808080;" > enter the characters in the following figure, case-insensitive </div><br/>

<a href= "#" id= "Change_image" > can not see Clearly, change a piece </a></td>
</tr>
<tr>
&LT;TD width= "></td>"
<td><input type= "image" Src= "app_themes/images/btn_login.jpg" id= "Btnlogin"
alt= "immediately login" style= "border:0;" /></td>
</tr>
</table>
</form>

jquery Code:

Copy Code code as follows:

<script language= "javascript" type= "Text/javascript" >
$ (document). Ready (function () {
Verify Code Update
$ (' #change_image '). Click (
function () {
$ (' #imgCheckCode '). attr (' src ', ' checkcode.aspx? ') +math.random ());
});
Critical code
$ ("#btnLogin"). Click (function () {
if (Checkusername () && checkuserpwd () && Checkcheckcode ())
{
var data = {
UserName: $ (' #txtUserName '). Val (),
USERPWD: $ (' #txtUserPwd '). Val (),
Checkcode: $ (' #txtCheckCode '). Val ()
};
Submit data to Login.ashx page processing
$.post ("Ajax/login.ashx", data,function (Result) {
if (result = = "1")//Login Successful
{
Alert ("Login succeeded!") You can do other things! ");
Close the Simulation window
Window.parent.window.jBox.close ();
}
else if (result = = "2")//Validation code Error
{
$ (' #txtCheckCode '). Next ("span"). CSS ("Color", "red"). Text ("*
Validation code Error ");
}
Else
{
Alert ("Login 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 ("* User name is not NULL");
return false;
}
Else
{
var reg =/^\d{9}$/;
if (!reg.test (' #txtUserName '). Val ())
{
$ (' #txtUserName '). Next ("span"). CSS ("Color", "red"). Text ("* Correct format
such as: 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 NULL");
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 ("* Verify code is not NULL");
return false;
}
Else
{
$ (' #txtCheckCode '). Next ("span"). CSS ("Color", "red"). Text ("");
return true;
}
}
</script>

LOGIN.ASHX Code:

Copy Code 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; Support required references for 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 failure, user name or password error
}
}
}
Else
{
Context. Response.Write ("2"); Validation code Error
}
}

public bool IsReusable
{
Get
{
return false;
}
}
}
}