Ajax登录页面

来源:Alexis的51博客 责任编辑:栏目编辑 发表时间:2013-07-02 01:43 点击:

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

先来看看预览效果 

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

基本流程图如下
 

上面是主要思路,为了打造安全的登录,在使用ajax将密码传到服务器端前,我们可以使用MD5对密码进行加密,当然数据库中存储的也是加密后的字符串。jQuery有一款这样的MD5加密插件,使用十分方便。

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

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

  1. <div style="margin-left:50px; margin-top:50px; ">  
  2. 欢迎使用后台,<a href="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;  
  3. 继续浏览前台,<a href="../Default.aspx">返回前台</a>  

login.htm:真正的登录界面,负责登录逻辑

 

  1. <script type="text/javascript" src="js/jquery-1.3.2.js"></script> 
  2. <script type="text/javascript"> 
  3.     $().ready(function () {  
  4.         $('#Login').click(function () {  
  5.             if ($('#username').val() == "" || $('#password').val() == "") {  
  6.                 alert("用户名或密码不能为空!");  
  7.             }  

    相关新闻>>

      发表评论
      请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
      用户名: 验证码:点击我更换图片
      最新评论 更多>>

      推荐热点

      • 浅析.NET下XML数据访问新机制
      • asp.net 面试+笔试题目第1/2页
      • C# 邮件地址是否合法的验证
      • C#高级编程:数据库连接[1]
      • asp.net 设置GridView的选中行的实现代码
      • 经典C++程序1
      • IIS 自动回收导致后台定时器失效的问题解决
      • ASP.NET&#160;GridView列表代码示例
      • 微软ASP.NET站点部署指南(3):使用Web.Config文件的Transforma
      网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
      Copyright © 2008-2015 计算机技术学习交流网. 版权所有

      豫ICP备11007008号-1