当前位置:编程学习 > asp >>

一步一步学asp.net_Ajax登录设计

Ajax登录设计

任务需求:做一个登录,拥有自动记住账号和密码的功能,要保证安全性,ajax,无刷新,良好的用户体验.(母板页)

这是前台页面,要求实现用户登录

 clip_image002

首先我们分析,
用户需求:
1. 登录以后,登录框隐藏,并且欢迎登录的框显示,并且,左上角登录的按钮消失,安全退出显示.
2. 如果选择记住帐号和密码,下次登录直接登录,并且保证安全性.
实现过程:
首先,登录的时候发出ajax请求,用户验证登录,登录以后,保存当前用户名和密码到cookies中,注意,密码要用md5加密,md5是根据用户的机器配置生成的,并且返回登录状态和用户名的json数据
第二次登录的时候,检测用户状态,如果用户cookies保存的用户名和密码,根据用户名读取用户密码,并进行md5加密,检验两次密码是否相同,如果相同就返回json数据,登录状态true和用户名,如果cookies中只有用户名,那么返回登录状态为false和用户名
前台主要代码:
   1:  <%@ Master Language="C#" AutoEventWireup="true" CodeFile="Left_Top_Dwon.master.cs"
   2:      Inherits="Left_Top_Dwon" %>
   3:  
   4:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   5:  <html xmlns="http://www.w3.org/1999/xhtml">
   6:  <head id="Head1" runat="server">
   7:      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   8:      <title>无标题文档</title>
   9:      <link href="css/top_foot.css" rel="stylesheet" type="text/css" />
  10:      <link href="css/style.css" rel="stylesheet" type="text/css" />
  11:  
  12:      <script type="text/javascript" src='<%=ResolveUrl("js/main_nav.js")%>'></script>
  13:  
  14:      <script type="text/javascript" src='<%=ResolveUrl("js/nav.js") %>'></script>
  15:  
  16:      <script src='<%=ResolveUrl("Admin/scripts/jquery-1.7.1.min.js")%> ' type="text/javascript"></script>
  17:  
  18:      <script type="text/javascript">
  19:          //检测登录状态
  20:           function CheckLoginState()
  21:           {
  22:              $.ajax({
  23:              url:"Member/Data/GetMemberInfo.ashx?method=CheckLoginStatus",
  24:              type:"post",
  25:              success:function(data,status){
  26:                var jsonInfo= $.parseJSON(data);
  27:               // alert(data);
  28:                //同时记住账号和密码
  29:                if(jsonInfo.Status&&jsonInfo.UserName!="")
  30:                {
  31:                  $("#divNotLogin").hide();
  32:                  $("#divIsLogin").show();
  33:                  $("#liLogin").hide();
  34:                  $("#liLogout").show();
  35:                  $("#lbUserName").text(jsonInfo.UserName);
  36:                
  37:                }
  38:                //如果只记住账号
  39:                else if(jsonInfo.Status&&jsonInfo.UserName==""){
  40:                   $("#divNotLogin").show();
  41:                  $("#divIsLogin").hide();
  42:                  $("#liLogin").show();
  43:                  $("#liLogout").hide();
  44:                  $("#txtUserName").val(jsonInfo.UserName);
  45:                }
  46:                else{
  47:                  $("#divNotLogin").show();
  48:                  $("#divIsLogin").hide();
  49:                  $("#liLogin").show();
  50:                  $("#liLogout").hide();
  51:                }
  52:               
  53:              }
  54:           });
  55:           }
  56:          $(function(){
  57

补充:Web开发 , ASP.Net ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,