一步一步学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="">
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: $("#pnotlogin").hide();
32: $("#pislogin").show();
33: $("#lilogin").hide();
34: $("#lilogout").show();
35: $("#lbusername").text(jsoninfo.username);
36:
37: }
38: //如果只记住账号
39: else if(jsoninfo.status&&jsoninfo.username==""){
40: $("#pnotlogin").show();
41: $("#pislogin").hide();
42: $("#lilogin").show();
43: $("#lilogout").hide();
44: $("#txtusername").val(jsoninfo.username);
45: }
46: else{
47: $("#pnotlogin").show();
48: $("#pislogin").hide();
49: $("#lilogin").show();
50: $("#lilogout").hide();
51: }
52:
53: }
54: });
55: }
56: $(function(){
57: //第一次登录需要检测是否自动登录
58: checkloginstate();
59: //获取新闻类别
60: $.ajax({
61: url:'<%=resolveurl("admin/news/data/getnewsinfo.ashx?method=getnewstypeforcombox")%>',
62: type:"get",
63: success:function(text){
64: var jsondata=$.parsejson(text);
65: $("#m2").empty();//先清空m2子元素的内容
66: $.each(jsondata,function(key,value){ //注意这里
67: //这里链接还需要添加具体页面
68: $("#m2").append('<a href=\"'+'<%=resolveurl("news/newslist.x?typeid=")%>'+value.typeid+'\">'+value.typename+'</a>');
69: });
70: }
71: });
72: //获取工艺知识类别
73: $.ajax({
74: url:'<%=resolveurl("admin/product/data/getproductinfo.ashx?method=gettopcrafttypeinfo")%>',
75: type:"get",
76: success:function(text){
77:
78: var jsondata=$.parsejson(text);
79: $("#m1").empty();//先清空m2子元素的内容
80: $.each(jsondata,function(key,value){ //注意这里
81: //这里链接还需要添加具体页面
82: $("#m1").append('<a href=\"'+'<%=resolveurl("craftknowledge/craftknowledgelist.aspx?fid=")%>'+value.fid+'\">'+value.typename+'</a>');
83: });
84: }
85: });
86:
87: //登录
88: $("#alogin").click(function(){
89: var name=$("#txtusername").val();
90: var pwd=$("#txtpwd").val();
91: var cbname=$("#cbusername").attr("checked");
92: var cbpwd=$("#cbpwd").attr("checked");
93: if(name==""||pwd=="")
94: {
95: alert("用户名或密码不能为空!");
96: return;
97: }
98: if(cbname=="checked")
99: cbname="1";
100: else
101: cbname="0";
102: if(cbpwd=="checked")
103: cbpwd="1";
104: else
105: cbpwd="0";
106: var data={"name":name,"pwd":pwd,"cbname":cbname,"cbpwd":cbpwd }
107: $.ajax({
108: url:"member/data/getmemberinfo.ashx?method=memberlogin",
109: type:"post",
110: data:data,
111: success:function(returndata,status){
112: var jsoninfo= $.parsejson(returndata);
113: if(jsoninfo.status)
114: {
115:
116: $("#pnotlogin").hide();
117: $("#pislogin").show();
118: $("#lilogin").hide();
119: $("#lilogout").show();
120: $("#lbusername").text(jsoninfo.username);
121: }
122: else{
123: alert("您输入的帐号或密码错误!也有可能您的帐号未邮箱激活!");
124: }
125:
126: }
127:
128: });
129:
130: });
131:
132: });
133:
134: </script>
135:
136: <asp:contentplaceholder id="head" runat="server">
137: </asp:contentplaceholder>
138: </head>
139: <body>
140: <p class="sheel">
141: <p class="header">
142: <p class="top_side">
143: <ul>
144: <li id="lilogin"><a href="#">登录</a> | </li>
145: <li><a href="#">注册</a> </li>
146: <li>|<a href="#">个人信息</a> </li>
147: <li>|<a href="#">我的收藏夹</a> </li>
148: <li>|<a href="#">我的留言</a> </li>
149: <li>|<a href="#">总站留言</a> </li>
150: <li id="lilogout">|<a id="a2" href='<%=resolveurl("member/data/getmemberinfo.ashx?method=memberlogout")%>'>安全退出</a></li>
151: </ul>
152: </p>
153: <p class="nav">
154: <ul id="sddm">
155: <li><a href="#">首 页</a> </li>
156: <li><a href="#">工艺概况</a></li>
157: <li><a href="#" onmouver="mopen('m1')" onmouseout="mclosetime()">工艺知识</a>
158: <p id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
159: <a href="#">大吴泥塑</a> <a href="#">金漆木雕</a> <a href="#">潮州刺绣</a> <a href="#">潮州陶瓷</a>
160: </p>
161: </li>
162: <li><a href="#">作品展览</a></li>
163: <li><a href="#">非遗作品</a></li>
164: <li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">新闻中心</a>
165: <p id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
166: <a href="#">大吴泥塑</a> <a href="#">金漆木雕</a> <a href="#">潮州刺绣</a> <a href="#">潮州陶瓷</a>
167: </p>
168: </li>
169: <li><a href="#">大师风采</a></li>
170: <li><a href="#">企业展示</a></li>
171: <li><a href="#">联系我们</a></li>
172: </ul>
173: </p>
174: </p>
175: <p class="content">
176: <p class="left_side">
177: <form id="flogin">
178: <p class="logo_bottom">
179: </p>
180: <p class="login">
181: <h4>
182: 用户登录</h4>
183: <p class="lg_table" id="pnotlogin">
184: <table class="table1" width="198" cellpadding="0" cellspacing="0" border="0">
185: <tr>
186: <td width="40" align="right">
187: 用户名
188: </td>
189: <td width="108" align="center">
190: <input type="text" id="txtusername" name="txtusername" />
191: </td>
192: <td width="50" rowspan="2">
193: <a href="#" id="alogin">
194: <img src='<%=resolveurl("images/login.png")%>' alt="登录" /></a>
195: </td>
196: </tr>
197: <tr>
198: <td align="right">
199: 密码
200: </td>
201: <td align="center">
202: <input type="password" name="txtpwd" id="txtpwd" />
203: </td>
204: </tr>
205: </table>
206: <p class="border">
207: </p>
208: <table class="table2" width="190" cellpadding="0" cellspacing="0" border="0">
209: <tr>
210: <td width="90">
211: <a href="#">
212: <img src='<%=resolveurl("images/lg_forget.png")%>' alt="忘记密码" /></a>
213: </td>
214: <td width="100">
215: <a href="#">
216: <img src='<%=resolveurl("images/zhuce.png")%>' alt="注册" /></a>
217: </td>
218: </tr>
219: <tr>
220: <td>
221: <input type="checkbox" name="cbusername" id="cbusername" /><span>记住用户名</span>
222: </td>
223: <td>
224: <input type="checkbox" name="cbpwd" id="cbpwd" /><span>记住密码</span>
225: </td>
226: </tr>
227: </table>
228: </p>
229: <p class="lg_table" id="pislogin">
230: <table id="tbislogin" class="table1" width="198" cellpadding="0" cellspacing="0"
231: border="0">
232: <tr>
233: <td class="style1" style="height: 90px">
234: <font style="color: red">欢迎您回来!</font><br />
235: 尊敬的的<font style="color: red"><label id="lbusername"></label></font>用户!
236: </td>
237: </tr>
238: <tr>
239: <td align="center" class="style2">
240: <a href="###">查看个人信息</a> | <a id="a1" href='<%=resolveurl("member/data/getmemberinfo.ashx?method=memberlogout")%>'>退出</a>
241: </td>
242: </tr>
243: </table>
244: </p>
245: </p>
246: </form>
247: <p class="enter enter1">
248: <a href="#">
249: <img src='<%=resolveurl("images/master.png")%>' alt="大师入口" title="大师入口" /></a></p>
250: <p class="enter enter2">
251: <a href="#">
252: <img src='<%=resolveurl("images/company.png")%>' alt="企业入口" title="企业入口" /></a></p>
253: <p class="paihang">
254: <h3>
255: <p class="hide">
256: 推荐排行榜</p>
257: <p>
258: <a href="#">更多</a></p>
259: </h3>
260: <ul class="ph_ul" id="ph1">
261: <li><a href="#" onmouseover="setph(0);" class="ph_hover">大师推荐</a></li>
262: <li><a href="#" onmouseover="setph(1);">工艺品推荐</a></li>
263: <li><a href="#" onmouseover="setph(2);">企业推荐</a></li>
264: </ul>
265: <p class="ph_p" id="ph2">
266: <ul style="display: block;">
267: <li class="ph_li1"><a href="#" class="phplihover">周少君</a></li>
268: <li class="ph_li2"><a href="#">周少君</a></li>
269: <li class="ph_li3"><a href="#">周少君</a></li>
270: <li class="ph_li4"><a href="#">周少君</a></li>
271: <li class="ph_li5"><a href="#">周少君</a></li>
272: </ul>
273: <ul>
274: <li class="ph_li1"><a href="#" class="phplihover">大大个</a></li>
275: <li class="ph_li2"><a href="#">大大个</a></li>
276: <li class="ph_li3"><a href="#">大大个</a></li>
277: <li class="ph_li4"><a href="#">大大个</a></li>
278: <li class="ph_li5"><a href="#">大大个</a></li>
279: </ul>
280: <ul>
281: <li class="ph_li1"><a href="#" class="phplihover">小小粒</a></li>
282: <li class="ph_li2"><a href="#">小小粒</a></li>
283: <li class="ph_li3"><a href="#">小小粒</a></li>
284: <li class="ph_li4"><a href="#">小小粒</a></li>
285: <li class="ph_li5"><a href="#">小小粒</a></li>
286: </ul>
287: </p>
288: </p>
289: <p class="question">
290: <h3>
291: <p class="hide">
292: 参与调查</p>
293: </h3>
294: <table width="200">
295: <tr>
296: <td colspan="2">
297: <b>q.</b><span>您最喜欢以下哪种工艺品？</span>
298: </td>
299: </tr>
300: <tr>
301: <td>
302: <input type="radio" /><span>泥塑</span>
303: </td>
304: <td>
305: <input type="radio" /><span>木雕</span>
306: </td>
307: </tr>
308: <tr>
309: <td>
310: <input type="radio" /><span>陶瓷</span>
311: </td>
312: <td>
313: <input type="radio" /><span>石雕</span>
314: </td>
315: </tr>
316: <tr>
317: <td>
318: <a href="#">
319: <img src='<%=resolveurl("images/sumbit.gif")%>' alt="提交" /></a>
320: </td>
321: <td>
322: <a href="#">
323: <img src='<%=resolveurl("images/see.gif")%>' alt="查看结果" /></a>
324: </td>
325: </tr>
326: </table>
327: </p>
328: <p class="search">
329: <p class="search_thing">
330: <table width="225">
331: <tr>
332: <td height="25">
333: <select name="select" class="select">
334: <option>木雕</option>
335: <option>泥塑</option>
336: <option>陶瓷</option>
337: </select>
338: </td>
339: <td height="25">
340: <input type="text" value="" />
341: </td>
342: </tr>
343: <tr>
344: <td colspan="2">
345: <a href="#">
346: <img src='<%=resolveurl("images/search.png")%>' alt="搜索" /></a>
347: </td>
348: </tr>
349: <tr>
350: <td colspan="2" class="high_search">
351: <a href="search.html">前往高级搜索>></a>
352: &nb
上一篇： 在CSS中，如何编写新闻列表？