温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Ajax异步请求登录

发布时间:2020-05-28 02:19:10 来源:网络 阅读:939 作者:杜碧君 栏目:web开发

做这个登录呢,我用到一个第三方的JqueryUI,这个开源的JueryUI里面有一个对话框dialog,里面的登录层已经封装好了。下面就来说说把实现登录

1.先把第三方的东西拿过来

  1. <link href="../Css/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" /> 
  2.    <script src="../member/js/jquery-1.7.2.js" type="text/javascript"></script> 
  3.    <script src="../SWFUpload/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script> 

2.把html表单给弄出来

  1. <body> 
  2.     <form id="form1" runat="server"> 
  3.     <div> 
  4.         <div> 
  5.             <div id="divLogin" style="display: none"> 
  6.                 <a id="linkUserName"></a><a id="linkLogout" href="void(0)"< /span>>注销</a> 
  7.             </div> 
  8.             <div id="divNotLogin" style="display: none"> 
  9.                 <a href="void(0)"< /span> id="linkLogin">登录</a> 
  10.             </div> 
  11.             <div id="dlgLogin" style="display: none"> 
  12.                 用户名:<input type="text" id="txtLoginUserName" /><br /> 
  13.                 密码:<input type="password" id="txtLoginPassword" /><br /> 
  14.                 <div id="divLoginMsg" style="color: Red"> 
  15.                 </div> 
  16.                 <br /> 
  17.                 <input type="button" id="btnLogin" value="登录" /> 
  18.             </div> 
  19.         </div> 
  20.     </form> 
  21. </body> 
|||||现在我们写Jquery代码
 
  1. <script type="text/javascript"
  2.     $(function(){ 
  3.     CheckLogin();//调用检查用户是否登录的方法 
  4.     //当用户点击这个登录按钮的时候 
  5.        $("#btnLogin").click(function(){ 
  6.        userLogin();//调用用户登录的方法 
  7.        location.href="/member/BookShow_UI.aspx";//登录成功转向这个页面 
  8.        }); 
  9.         //这个是JqueryUI里面封装好的一个点击事件 
  10.          $("#linkLogin").click(function () { 
  11.                 $("#dlgLogin").dialog({ 
  12.                     modal: true
  13.                     buttons: { 
  14.                         Ok: function () { 
  15.                             $(this).dialog('close'); 
  16.                         } 
  17.                     } 
  18.                 }); 
  19.     }); 
  20.      //用户登录 
  21.      function userLogin(){ 
  22.       //先收集用户在文本框里面输入的值 
  23.       var name=$("#txtLoginUserName").val(); 
  24.       var pwd=$("#txtLoginPassword").val(); 
  25.       //判断用户输入的不能为空 
  26.       if(name!="" && pwd!=null){ 
  27.        $.post("/ashx/Login.ashx",{"action":"login","textName":name,"textPwd":pwd},function(data){ 
  28.  var str=data.split(":"); 
  29.   var s = data.split(":"); 
  30.                     if (s[0] == "0k") { 
  31.                         $("#divLogin").show(); 
  32.                         $("#linkUserName").text(s[1]); 
  33.                         //把层关闭 
  34.                         $("#dlgLogin").dialog('close'); 
  35.                         $("#divNotLogin").hide(); 
  36.                         $("#dlgLogin").hide(); 
  37.                     } else if (s[0] == "no") { 
  38.                         $("#divLogin").hide(); 
  39.                         $("#divNotLogin").show(); 
  40.                     } else { 
  41.                         alert("错误咯"); 
  42.                         return false
  43.                     } 
  44. }); 
  45.        } 
  46.      }; 
  47.      //检查用户是否登录了 
  48.         function CheckLogin() { 
  49.             $.post("/ashx/Login.ashx", { "action""check" }, function (data) { 
  50.                 var s = data.split(":"); 
  51.                 if (s[0] == "ok") {//ok表示已经登录了  
  52.                     $("#divLogin").show(); 
  53.                     $("#linkUserName").text(s[1]); 
  54.                     $("#divNotLogin").hide(); 
  55.                     $("#dlgLogin").hide(); 
  56.                 } else if (s[0] == "no") { 
  57.                     $("#divLogin").hide(); 
  58.                     $("#divNotLogin").show(); 
  59.                 } else { 
  60.                     alert("错误咯!!"); 
  61.                 } 
  62.             }); 
  63.         } 
  64. </scirpt> 

========================================一般处理程序
在一般处理程序里面要存储用户的信息,Seesion["User"]=user,在一般处理程序里面要存储用户的帐号与密码
到Session里面。在一般处理程序里面必须要实现一个接口 System.Web.SessionSatae.IRequiresSessionState
1.先来接收到前台是选择的是  check检查用户是否登录   login用户以登录
string action=context.Request.Form["action"];//来取到是check还是login
//如果说用户是第一次登录的页面,就要检查此用户是否存在

  1. if(action=="check"){ 
  2.    //判断用户是否存在 
  3.    if(context.Session["User"]!=null
  4.     { 
  5.     //我们就要把用户的帐与密码取出来存在Seesion中 
  6.     context.Response.Write("ok:"+(((Model.User)context.Session["User"])).LoginId); 
  7.      }else
  8.       context.Response.Write("no:"); 
  9.      } 
  10. }else if(action=="login"){ 
  11. //取到用户有前台文本框里面输入的值 
  12. string textName=context.Request.Form["textName"]; 
  13. string textPwd=context.Request.Form["textPwd"]; 
  14. //创建一个BLL层 
  15. BLL.UserManger bll=new BLL.UserManager(); 
  16. //创建一个Model实体对象 
  17. Model.User model=null
  18. //创建一个用户登录的状态 
  19. string msg=string.Empty; 
  20. //定义一个变量来接收在bll层里面的用户登录的判断 
  21. bool b=bll.GetCheckUserLogin(textName,textPwd,out msg,out model); 
  22. //判断这个b是否为true; 
  23. if(b){ 
  24. context.Session["User"]=model; 
  25. context.Response.Write("ok:"+model.LoginId); 
  26. }else
  27. context.Response.Write("on:"); 
  在一般处理程序里面有一个方法是用来检查用户登录的状态
  在bll层里面来定义一个这样的方法GetCheckUserLogin(string name,string pwd,out string msg,out Model.User user)

  1. //定义一个用户来判断是否登录了参数用到了用户帐号用户密码状态和当前登录的用户名 
  2. public bool GetCheckUserLogin(string name,string pwd,out string msg out Model.User user) 
  3. //创建一个DAL层对象 
  4. DAL.UserServices dal=new DAL.UserServices(); 
  5. user=dal.GetModel(name);//判断用户帐与数据里面取到的是否相等  这个是用动软生成的 直接调用里面的这个取用户实体的对象方法 
  6. //如果说这个用户不存在 
  7. if(user!=null
  8. //判断用户的登录状态是否正常  这是在数据库里面 
  9. if(user.UserState.Name=="正常"
  10. //判断用户的密码是否与数据库里面的一样 
  11. if(user.LoginPwd=="pwd"
  12. msg="登录成功"
  13. return true
  14. }else
  15. msg="用户名或者密码错误"
  16. return false
  17. }else
  18. msg="用户没有激活"
  19. return false
  20. }else
  21. msg="用户不存在"
  22. return false
向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI