溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Ajax異步請求登錄

發(fā)布時間：2020-05-28 02:19:10 來源：網(wǎng)絡(luò) 閱讀：952 作者：杜碧君 欄目：web開發(fā)

做這個登錄呢，我用到一個第三方的JqueryUI,這個開源的JueryUI里面有一個對話框dialog,里面的登錄層已經(jīng)封裝好了。下面就來說說把實現(xiàn)登錄

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> 


|||||現(xiàn)在我們寫Jquery代碼
 

  1. <script type="text/javascript"> 
  2.     $(function(){ 
  3.     CheckLogin();//調(diào)用檢查用戶是否登錄的方法 
  4.     //當(dāng)用戶點擊這個登錄按鈕的時候 
  5.        $("#btnLogin").click(function(){ 
  6.        userLogin();//調(diào)用用戶登錄的方法 
  7.        location.href="/member/BookShow_UI.aspx";//登錄成功轉(zhuǎn)向這個頁面 
  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.                         //把層關(guān)閉 
  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表示已經(jīng)登錄了  
  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里面。在一般處理程序里面必須要實現(xiàn)一個接口 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. //創(chuàng)建一個BLL層 
  15. BLL.UserManger bll=new BLL.UserManager(); 
  16. //創(chuàng)建一個Model實體對象 
  17. Model.User model=null; 
  18. //創(chuàng)建一個用戶登錄的狀態(tài) 
  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:"); 
  28. } 
  29. } 
  在一般處理程序里面有一個方法是用來檢查用戶登錄的狀態(tài)
  在bll層里面來定義一個這樣的方法GetCheckUserLogin(string name,string pwd,out string msg,out Model.User user)


  1. //定義一個用戶來判斷是否登錄了參數(shù)用到了用戶帳號用戶密碼狀態(tài)和當(dāng)前登錄的用戶名 
  2. public bool GetCheckUserLogin(string name,string pwd,out string msg out Model.User user) 
  3. { 
  4. //創(chuàng)建一個DAL層對象 
  5. DAL.UserServices dal=new DAL.UserServices(); 
  6. user=dal.GetModel(name);//判斷用戶帳與數(shù)據(jù)里面取到的是否相等  這個是用動軟生成的 直接調(diào)用里面的這個取用戶實體的對象方法 
  7. //如果說這個用戶不存在 
  8. if(user!=null) 
  9. { 
  10. //判斷用戶的登錄狀態(tài)是否正常  這是在數(shù)據(jù)庫里面 
  11. if(user.UserState.Name=="正常") 
  12. { 
  13. //判斷用戶的密碼是否與數(shù)據(jù)庫里面的一樣 
  14. if(user.LoginPwd=="pwd") 
  15. { 
  16. msg="登錄成功"; 
  17. return true; 
  18. }else{ 
  19. msg="用戶名或者密碼錯誤"; 
  20. return false; 
  21. } 
  22. }else{ 
  23. msg="用戶沒有激活"; 
  24. return false; 
  25. } 
  26. }else{ 
  27. msg="用戶不存在"; 
  28. return false; 
  29. } 
  30. } 
向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手