jQuery Ajax异步交互登录界面

摘要：登录界面提供给用户维护信息的接口，登录界面重点在Ajax，这里使用的是ASP.NET与jQuery，输入用户名和密码后，使用Ajax方式将信息提交到服务器端，服务器端判断时候存在该用户，存在则登录成功并转向管理界面，有时需要cookie或Session，

登录界面提供给用户维护信息的接口，登录界面重点在Ajax，这里使用的是ASP.NET与jQuery，输入用户名和密码后，使用Ajax方式将信息提交到服务器端，服务器端判断时候存在该用户，存在则登录成功并转向管理界面，有时需要cookie或Session，此处不作讨论，不存在则提示登录失败。

出于安全需要，在使用ajax将密码传到服务器端前，我们可以使用MD5对密码进行加密，当然数据库中存储的也是加密后的字符串。jQuery有一款这样的MD5加密插件。

主要代码

Default.aspx提供超链接，点击会调用thickbox，打开弹出页面。

以下为引用内容：

<divstyle="margin-left:50px;margin-top:50px;">

欢迎使用后台，<ahref="Login.htm?TB_iframe&height=180&width=350&modal=true"class="thickbox"id="myToolTip"title="点击登录，进入后台管理">点击登录！</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

继续浏览前台，<ahref="../Default.aspx">返回前台</a>

login.htm登录界面，负责登录逻辑。

以下为引用内容：

<scripttype="text/javascript"src="js/jquery-1.3.2.js"></script>

<scripttype="text/javascript">

$().ready(function(){

$('#Login').click(function(){

if($('#username').val()==""||$('#password').val()==""){

alert("用户名或密码不能为空！");

}

else{

$.ajax({

type:"POST",

url:"Ajax/LoginHandler.ashx",

data:"username="+escape($('#username').val())+"&password="+escape($('#password').val()),

beforeSend:function(){

$("#loading").css("display","block");//点击登录后显示loading，隐藏输入框

$("#login").css("display","none");

},

success:function(msg){

$("#loading").hide();//隐藏loading

if(msg=="success"){

//parent.tb_remove();

parent.document.location.href="admin.htm";//如果登录成功则跳到管理界面

parent.tb_remove();

}

if(msg=="fail"){

alert("登录失败！");

}

},

complete:function(data){

$("#loading").css("display","none");//点击登录后显示loading，隐藏输入框

$("#login").css("display","block");

},

error:function(XMLHttpRequest,textStatus,thrownError){

}

});

}

});

});

</script>

<divid="loading"style="text-align:center;display:none;padding-top:10%">

<imgsrc="images/loading.gif"alt="loading"/>

</div>

<divid="login"style="text-align:center">

<divstyle="position:absolute;right:0;top:0"><imgsrc="images/closebox.png"onclick="parent.tb_remove()"alt="点击关闭"style="cursor:pointer"/></div>

<tableborder="0"cellpadding="3"cellspacing="3"style="margin:0auto;">

<tr>

<tdstyle="text-align:right;padding:10px">

<label>用户名:</label>

</td>

<td>

<inputid="username"type="text"size="20"/>

</td>

</tr>

<tr>

<tdstyle="text-align:right;padding:10px">

<label>密码:</label>

</td>

<td>

<inputid="password"type="password"size="20"/>

</td>

</tr>

<tralign="right">

<tdcolspan="2">

<inputtype="submit"id="Login"value="&nbsp;&nbsp;登&nbsp;录&nbsp;&nbsp;"style="margin-right:50px">&nbsp;

<inputtype="submit"id="LoginCancel"value="&nbsp;&nbsp;取&nbsp;消&nbsp;&nbsp;"onclick="parent.tb_remove()">

</td>

</tr>

</table>

</div>

LoginHandler.ashxajax处理类，处理简单逻辑。

以下为引用内容：

//此处连接数据库查看是否有此用户，此处为了方便起见，直接判断

if(username=="admin"&&password=="1"){

context.Response.Write("success");

//存储session

}else{

context.Response.Write("fail");

}

jQuery加密MD5插件，引用md5.js后使用$.md5()函数对字符串进行加密。

login.htm

以下为引用内容：

data:"username="+escape($('#username').val())+"&password="+$.md5(escape($('#password').val())),

success:function(msg){

$("#loading").hide();//隐藏loading

alert(msg);

if(msg=="success"){

//parent.tb_remove();

parent.document.location.href="admin.htm";//如果登录成功则跳到管理界面

parent.tb_remove();

}

if(msg=="fail"){

alert("登录失败！");

}

}

LoginHandler.ashx中加密码返回。

以下为引用内容：

context.Response.Write(password);

再次运行程序弹出输入密码的MD5加密后的字符串。