一步一步学asp.net_Ajax登录设计
Ajax登录设计
任务需求:做一个登录,拥有自动记住账号和密码的功能,要保证安全性,ajax,无刷新,良好的用户体验.(母板页)
这是前台页面,要求实现用户登录
首先我们分析,
用户需求:
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 ,