asp.net jQuery Ajax使用者登入功能的實現

首頁面調用程式碼片段：

<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','使用者登入 ','width=400,height=250,center=true,draggable=true,model=true'); } ); </script>

Login.aspx代碼：

<form id="form1" onsubmit="return false;"> <table id="login-table"> <tr> <td width="60">學號：</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">驗證碼：</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;">輸入中的字元，不區分大小寫</div><br /> <img src="CheckCode.aspx" style="vertical-align:middle;" alt="驗證碼" 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代碼：

<script language="javascript" type="text/javascript" > $(document).ready(function(){ // 驗證碼更新 $('#change_image').click( function(){ $('#imgCheckCode').attr('src','CheckCode.aspx?'+Math.random()); }); //關鍵的代碼 $("#btnLogin").click(function(){ if(checkUserName() && checkUserPwd() && checkCheckCode()) { var data = { UserName: $('#txtUserName').val(), UserPwd: $('#txtUserPwd').val(), CheckCode: $('#txtCheckCode').val() }; //提交資料給Login.ashx頁面處理 $.post("Ajax/Login.ashx",data,function(result){ if(result == "1") //登入成功 { alert("登入成功！您可以進行其他動作了！"); // 關閉類比視窗 window.parent.window.jBox.close(); } else if(result == "2") //驗證碼錯誤 { $('#txtCheckCode').next("span").css("color","red").text("* 驗證碼錯誤"); } else { alert("登入失敗！請重試"); } }); } else { checkUserName(); checkUserPwd(); checkCheckCode(); } }); }); //check the userName function checkUserName() { if($("#txtUserName").val().length == 0) { $("#txtUserName").next("span").css("color","red").text("*使用者名稱不為空白"); 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("*驗證碼不為空白"); return false; } else { $('#txtCheckCode').next("span").css("color","red").text(""); return true; } } </script>

Login.ashx代碼：

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"); //登入失敗，使用者名稱或密碼錯誤 } } } else { context.Response.Write("2"); // 驗證碼錯誤 } } public bool IsReusable { get { return false; } } } }