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:
| The code is as follows |
Copy Code |
| <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>
<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>
<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>
<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>
<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>
<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;
}
}
}
} |
Using jquery+ajax/"target=" _blank ">jquery Ajax pros and cons analysis
Advantages
Small, compressed code only 20 more K (no compression code 94k).
Selector and Dom easy to operate: jquery Selector compared to MooTools Element.Selectors.js, CSS Selector, XPath Selector (deleted after 1.2)
Chaining: Always returns a JQuery object that can be continuously manipulated.
The integrity of the document, ease of use (each API has a complete example, which is not comparable to other frameworks now), and there are many other documents on the Web, books.
Extensive application, including Google Code, also uses jquery.
Sites using jquery: Http://docs.jquery.com/Sites_Using_jQuery
Core development team and core personnel: John Resig and so on.
Concise and short grammar, easy to remember.
Scalability: A large number of user-developed plug-ins available (http://jquery.com/plugins/)
The jquery UI (http://jquery.com/plugins/, based on jquery, but with the core of jquery is independent), continues to evolve.
Friendly and active community: Google Groups:http://docs.jquery.com/discussion
Event handling has many convenient methods, such as Click, not single addevent.
Disadvantages
Because design idea is the pursuit of efficiency and simplicity, there is no object-oriented extension. Design ideas and MooTools are not the same.
CSS selector slightly slower (but now the speed has increased dramatically)
