Ajax实现漂亮、安全的登录界面

登录界面是信息系统提供的必备的功能，是提供给用户提供维护信息的接口。接下来，我来带领大家打造一个漂亮、安全的登录界面，使用的技术是ASP .NET jQuery

先来看看预览效果

埃阿斯登录重点在Ajax，输入用户名和密码后，使用埃阿斯方式将信息提交到服务器端，服务器端判断时候存在该用户，存在则登录成功并转向管理界面（有时需要写甜饼干或是利用会话，此处不作讨论),不存在则提示登录失败。

基本流程图如下

上面是主要思路，为了打造安全的登录，在使用创建交互式、快速动态网页应用的网页开发技术将密码传到服务器端前，我们可以使用讯息摘要5对密码进行加密，当然数据库中存储的也是加密后的字符串jQuery。有一款这样的讯息摘要5加密插件，使用十分方便。

流程知道了，就可以方便实现了。以下是一些主要的代码

Default.aspx:主要是提供超链接，点击会调用厚盒子，打开弹出页面。

div style='左边距：50 px'页边距-顶部：50像素；'欢迎使用后台，a href='Login.htm？TB _ iframe高度=180宽度=350 modal=true ' class=' thick box ' id=' my tooltip ' title='点击登录，进入后台管理' 点击登录！/a继续浏览前台，a href='./Default.aspx '返回前台/a login.htm:真正的登录界面，负责登录逻辑

脚本类型=' text/JAVAScript ' src=' http : js/jquery-1。3 .2 .js '/脚本脚本类型='text/javascript' $().就绪(函数(){ $('#Login ').单击(函数(){ if ($('#username ')).val()=='' || $('#password ').val()=='') { alert('用户名或密码不能为空!');} else { $ .ajax({ type: 'POST '，URL : ' Ajax/loginhandler。ashx '，数据： ' username=' escape($(' # username ').val())" password=" escape($(" # password ")。val())、beforeSend:函数(){ $(“# loading”).css('display '，' block ')；//点击登录后显示装载，隐藏输入框$(“# log in”).css('display '，' none ')；}，成功：函数(消息){ $(' #正在加载').hide()；//隐藏正在加载if(msg=="success"){//parent。TB _ remove()；父母。文件。位置。href=' admin。htm '；//如果登录成功则跳到管理界面父母。TB _ remove()；} if(msg=="fail"){ alert('登录失败!');} }，完成：函数（数据){ $(“# loading”).css('display '，' none ')；//点击登录后显示装载，隐藏输入框$(“# log in”).css('display '，' block ')；}，错误：函数(XMLHttpRequest，textStatus，thrownError){ } })；} });});/script div id=' loading ' style=' text-align : center；显示器：无；填充-top : 10% ' img src=' http : images/loading jax。gif ' alt=' loading '/div div id=' log in ' style=' text-align : center ' div style=' position : absolute；right :0 top :0 ' img src=' http : images/close box。png“onclick=”父级。TB _ remove()“alt=”点击关闭style='光标：指针'/div表格边框='0 '单元格填充='3 '单元格间距=' 3 ' style=' margin : 0 autotr TD style=' text-align : right；padding: 10px '标签用户名：/label /td td输入id=' username ' type=' text ' size=' 20 '/TD/tr tr TD style=' text-align : right；padding: 10px '标签密码：/label /td td输入id=' password ' type=' password ' size=' 20 '/TD/tr tr align=' right ' TD colspan=' 2 '输入类型='提交' id='登录'值='登录style='margin-right: 50px '输入类型=' submit ' id=' logincencel ' value='取消onclick=' parent。TB _ remove()'/TD/tr/table/div loginhandler。ashx:Ajax处理类，简单的逻辑

字符串用户名=上下文。请求['用户名']。ToString()；字符串密码=上下文。请求['密码']。ToString()；//上下文。回应.写(密码)；如果使用加密，请将要加密的字段写入数据库，然后在登录时使用加密的字符串进行匹配。//这里连接数据库看看有没有这个用户，为了方便直接判断(username==' admin ' password==' 1 '){ context . response . write(' success ')；//存储会话} else { context . response . write(' fail ')；}好了，一个简单的登录功能就完成了，当然这里登录的时候没有密码加密。

我们来看看jQuery的加密插件MD5插件，使用起来非常方便。您可以使用$.md5()函数通过添加md5.js的引用来加密字符串。您可以通过稍微更改上面的代码来查看加密的字符串，如下所示。在login.htm中：

data :“username=”escape($(“# username”))。val())' password=' $ . MD5(escape($(' # password ')。val()))，success:函数(msg) { $('#loading ')。hide()；//隐藏加载警报(msg)；if(msg==' success '){//parent . TB _ remove()；parent . document . location . href=' admin . htm '；//如果登录成功，跳到parent . TB _ remove()；} if (msg=='fail') {alert('登录失败！');} }可以通过添加密码来返回LoginHandler.ashx:

语境。回应.写(密码)；

好了，再次运行程序会弹出输入密码的MD5加密字符串。

以上是比较简单的意见，下载地址：AjaxLogin

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。