asp.net jQuery Ajax用戶登錄功能的實現
2024-07-10 12:38:27
供稿：網友
主頁面調用代碼片段：
代碼如下:
<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("登錄失敗！請重試");
