jQuery+Ajax用戶(hù)登錄功能的實(shí)現(xiàn)

更新時(shí)間：2009年11月26日 01:42:08 作者：

前幾天把jbox源碼修改成仿QQ空間模擬窗口后發(fā)現(xiàn)有很多人在關(guān)注。今天就貼一下我利用該模擬窗口實(shí)現(xiàn)的用戶(hù)登錄功能的代碼。

ok，先來(lái)貼幾張張效果圖。

其中大致流程是用戶(hù)點(diǎn)擊頁(yè)面右上角的登錄鏈接接著彈出div模擬窗口，該窗口通過(guò)iframe調(diào)用Login.aspx頁(yè)面，用戶(hù)輸入用戶(hù)名

密碼和驗(yàn)證碼后，Login.aspx頁(yè)面的jQuery代碼post到Login.ashx頁(yè)面處理，Login.ashx頁(yè)面可以算是簡(jiǎn)易的aspx頁(yè)面吧。

當(dāng)然你用LoginProcess.aspx 也是可以的。Login.ashx頁(yè)面處理完把結(jié)果返回給Login.aspx頁(yè)面處理，result變量用與接收結(jié)果。

如果返回1表示登錄成功，則關(guān)閉模擬窗口。

主頁(yè)面調(diào)用代碼片段：

復(fù)制代碼代碼如下:

 
<asp:HyperLink ID="lnkLogin" runat="server" NavigateUrl="#" >登錄</asp:HyperLink> 

<script language="javascript" type="text/javascript"> 
$('#<%=this.lnkLogin.ClientID %>').click( 
function(){ 
jBox.open('iframe-jBoxID','iframe','Login.aspx','用戶(hù)登錄 
','width=400,height=250,center=true,draggable=true,model=true'); 
} ); 
</script> 

復(fù)制代碼代碼如下:

 
<form id="form1" onsubmit="return false;"> 
<table id="login-table"> 
<tr> 
<td width="60">學(xué)號(hào)：</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">密碼：</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">驗(yàn)證碼：</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;">輸入下圖中的字符，不區(qū)分大小寫(xiě)</div><br /> 
<img src="CheckCode.aspx" style="vertical-align:middle;" alt="驗(yàn)證碼" id="imgCheckCode" /> 
<a href="#" id="change_image">看不清，換一張</a></td> 
</tr> 
<tr> 
<td width="60"></td> 
<td><input type="image" src="App_Themes/Images/btn_login.jpg" id="btnLogin" 
alt="馬上登錄" style="border:0;"/></td> 
</tr> 
</table> 
</form> 

jQuery代碼：

復(fù)制代碼代碼如下:

 
<script language="javascript" type="text/javascript" > 
$(document).ready(function(){ 
// 驗(yàn)證碼更新 
$('#change_image').click( 
function(){ 
$('#imgCheckCode').attr('src','CheckCode.aspx?'+Math.random()); 
}); 
//關(guān)鍵的代碼 
$("#btnLogin").click(function(){ 
if(checkUserName() && checkUserPwd() && checkCheckCode()) 
{ 
var data = { 
UserName: $('#txtUserName').val(), 
UserPwd: $('#txtUserPwd').val(), 
CheckCode: $('#txtCheckCode').val() 
}; 
//提交數(shù)據(jù)給Login.ashx頁(yè)面處理 
$.post("Ajax/Login.ashx",data,function(result){ 
if(result == "1") //登錄成功 
{ 
alert("登錄成功！您可以進(jìn)行其他操作了！"); 
// 關(guān)閉模擬窗口 
window.parent.window.jBox.close(); 
} 
else if(result == "2") //驗(yàn)證碼錯(cuò)誤 
{ 
$('#txtCheckCode').next("span").css("color","red").text("* 
驗(yàn)證碼錯(cuò)誤"); 
} 
else 
{ 
alert("登錄失敗！請(qǐng)重試"); 
} 
}); 
} 
else 
{ 
checkUserName(); 
checkUserPwd(); 
checkCheckCode(); 
} 
}); 
}); 

//check the userName 
function checkUserName() 
{ 
if($("#txtUserName").val().length == 0) 
{ 
$("#txtUserName").next("span").css("color","red").text("*用戶(hù)名不為空"); 
return false; 
} 
else 
{ 
var reg = /^\d{9}$/; 
if(!reg.test($('#txtUserName').val())) 
{ 
$('#txtUserName').next("span").css("color","red").text("*正確的格式 
如：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("*密碼不為空"); 
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("*驗(yàn)證碼不為空"); 
return false; 
} 
else 
{ 
$('#txtCheckCode').next("span").css("color","red").text(""); 
return true; 
} 
} 
</script> 

復(fù)制代碼代碼如下:

 
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; //支持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"); // 登錄成功 
} 
else 
{ 
context.Response.Write("0"); //登錄失敗，用戶(hù)名或密碼錯(cuò)誤 
} 
} 
} 
else 
{ 
context.Response.Write("2"); // 驗(yàn)證碼錯(cuò)誤 
} 
} 

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