欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-02 18:35:47
ajax登录设计 任务需求:做一个登录,拥有自动记住账号和密码的功能,要保证安全性,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="#">首&nbsp;&nbsp;页</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:                                      &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 尊敬的的<font style="color: red"><label id="lbusername"></label></font>用户!&nbsp;
 236:                                  </td>
 237:                              </tr>
 238:                              <tr>
 239:                                  <td align="center" class="style2">
 240:                                      <a href="###">查看个人信息</a>&nbsp; | <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