Ajax異步請求登陸

時間  2020-07-18
標籤 ajax 異步 請求 登陸 欄目 Ajax 简体版
原文   原文鏈接

作這個登陸呢，我用到一個第三方的JqueryUI,這個開源的JueryUI裏面有一個對話框dialog,裏面的登陸層已經封裝好了。下面就來講說把實現登陸javascript

1.先把第三方的東西拿過來css

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

2.把html表單給弄出來html

  
  
  
  
    
   
   
   
   
  1. <body> 
    2. 
   
   
   
   
  2.     <form id="form1" runat="server"> 
    3. 
   
   
   
   
  3.     <div> 
    4. 
   
   
   
   
  4.         <div> 
    5. 
   
   
   
   
  5.             <div id="divLogin" style="display: none"> 
    6. 
   
   
   
   
  6.                 <a id="linkUserName"></a><a id="linkLogout" href="void(0)"< /span>>註銷</a> 
    7. 
   
   
   
   
  7.             </div> 
    8. 
   
   
   
   
  8.             <div id="divNotLogin" style="display: none"> 
    9. 
   
   
   
   
  9.                 <a href="void(0)"< /span> id="linkLogin">登陸</a> 
    10. 
   
   
   
   
  10.             </div> 
    11. 
   
   
   
   
  11.             <div id="dlgLogin" style="display: none"> 
    12. 
   
   
   
   
  12.                 用戶名：<input type="text" id="txtLoginUserName" /><br /> 
    13. 
   
   
   
   
  13.                 密碼：<input type="password" id="txtLoginPassword" /><br /> 
    14. 
   
   
   
   
  14.                 <div id="divLoginMsg" style="color: Red"> 
    15. 
   
   
   
   
  15.                 </div> 
    16. 
   
   
   
   
  16.                 <br /> 
    17. 
   
   
   
   
  17.                 <input type="button" id="btnLogin" value="登陸" /> 
    18. 
   
   
   
   
  18.             </div> 
    19. 
   
   
   
   
  19.         </div> 
    20. 
   
   
   
   
  20.     </form> 
    21. 
   
   
   
   
  21. </body> 
    22. 
  
  
  
  


|||||如今咱們寫Jquery代碼
 

  
  
  
  
    
   
   
   
   
  1. <script type="text/javascript"> 
    2. 
   
   
   
   
  2.     $(function(){ 
    3. 
   
   
   
   
  3.     CheckLogin();//調用檢查用戶是否登陸的方法 
    4. 
   
   
   
   
  4.     //當用戶點擊這個登陸按鈕的時候 
    5. 
   
   
   
   
  5.        $("#btnLogin").click(function(){ 
    6. 
   
   
   
   
  6.        userLogin();//調用用戶登陸的方法 
    7. 
   
   
   
   
  7.        location.href="/member/BookShow_UI.aspx";//登陸成功轉向這個頁面 
    8. 
   
   
   
   
  8.        }); 
    9. 
   
   
   
   
  9.         //這個是JqueryUI裏面封裝好的一個點擊事件 
    10. 
   
   
   
   
  10.          $("#linkLogin").click(function () { 
    11. 
   
   
   
   
  11.                 $("#dlgLogin").dialog({ 
    12. 
   
   
   
   
  12.                     modal: true, 
    13. 
   
   
   
   
  13.                     buttons: { 
    14. 
   
   
   
   
  14.                         Ok: function () { 
    15. 
   
   
   
   
  15.                             $(this).dialog('close'); 
    16. 
   
   
   
   
  16.                         } 
    17. 
   
   
   
   
  17.                     } 
    18. 
   
   
   
   
  18.                 }); 
    19. 
   
   
   
   
  19.     }); 
    20. 
   
   
   
   
  20.      //用戶登陸 
    21. 
   
   
   
   
  21.      function userLogin(){ 
    22. 
   
   
   
   
  22.       //先收集用戶在文本框裏面輸入的值 
    23. 
   
   
   
   
  23.       var name=$("#txtLoginUserName").val(); 
    24. 
   
   
   
   
  24.       var pwd=$("#txtLoginPassword").val(); 
    25. 
   
   
   
   
  25.       //判斷用戶輸入的不能爲空 
    26. 
   
   
   
   
  26.       if(name!="" && pwd!=null){ 
    27. 
   
   
   
   
  27.        $.post("/ashx/Login.ashx",{"action":"login","textName":name,"textPwd":pwd},function(data){ 
    28. 
   
   
   
   
  28.  var str=data.split(":"); 
    29. 
   
   
   
   
  29.   var s = data.split(":"); 
    30. 
   
   
   
   
  30.                     if (s[0] == "0k") { 
    31. 
   
   
   
   
  31.                         $("#divLogin").show(); 
    32. 
   
   
   
   
  32.                         $("#linkUserName").text(s[1]); 
    33. 
   
   
   
   
  33.                         //把層關閉 
    34. 
   
   
   
   
  34.                         $("#dlgLogin").dialog('close'); 
    35. 
   
   
   
   
  35.                         $("#divNotLogin").hide(); 
    36. 
   
   
   
   
  36.                         $("#dlgLogin").hide(); 
    37. 
   
   
   
   
  37.                     } else if (s[0] == "no") { 
    38. 
   
   
   
   
  38.                         $("#divLogin").hide(); 
    39. 
   
   
   
   
  39.                         $("#divNotLogin").show(); 
    40. 
   
   
   
   
  40.                     } else { 
    41. 
   
   
   
   
  41.                         alert("錯誤咯"); 
    42. 
   
   
   
   
  42.                         return false; 
    43. 
   
   
   
   
  43.                     } 
    44. 
   
   
   
   
  44. }); 
    45. 
   
   
   
   
  45.        } 
    46. 
   
   
   
   
  46.      }; 
    47. 
   
   
   
   
  47.      //檢查用戶是否登陸了 
    48. 
   
   
   
   
  48.         function CheckLogin() { 
    49. 
   
   
   
   
  49.             $.post("/ashx/Login.ashx", { "action": "check" }, function (data) { 
    50. 
   
   
   
   
  50.                 var s = data.split(":"); 
    51. 
   
   
   
   
  51.                 if (s[0] == "ok") {//ok表示已經登陸了  
    52. 
   
   
   
   
  52.                     $("#divLogin").show(); 
    53. 
   
   
   
   
  53.                     $("#linkUserName").text(s[1]); 
    54. 
   
   
   
   
  54.                     $("#divNotLogin").hide(); 
    55. 
   
   
   
   
  55.                     $("#dlgLogin").hide(); 
    56. 
   
   
   
   
  56.                 } else if (s[0] == "no") { 
    57. 
   
   
   
   
  57.                     $("#divLogin").hide(); 
    58. 
   
   
   
   
  58.                     $("#divNotLogin").show(); 
    59. 
   
   
   
   
  59.                 } else { 
    60. 
   
   
   
   
  60.                     alert("錯誤咯！！"); 
    61. 
   
   
   
   
  61.                 } 
    62. 
   
   
   
   
  62.             }); 
    63. 
   
   
   
   
  63.         } 
    64. 
   
   
   
   
  64. </scirpt> 
    65. 
  
  
  
  

========================================通常處理程序
在通常處理程序裏面要存儲用戶的信息，Seesion["User"]=user,在通常處理程序裏面要存儲用戶的賬號與密碼
到Session裏面。在通常處理程序裏面必需要實現一個接口 System.Web.SessionSatae.IRequiresSessionState
1.先來接收到前臺是選擇的是  check檢查用戶是否登陸   login用戶以登陸
string action=context.Request.Form["action"];//來取到是check仍是login
//若是說用戶是第一次登陸的頁面，就要檢查此用戶是否存在


  
  
  
  
    
   
   
   
   
  1. if(action=="check"){ 
    2. 
   
   
   
   
  2.    //判斷用戶是否存在 
    3. 
   
   
   
   
  3.    if(context.Session["User"]!=null) 
    4. 
   
   
   
   
  4.     { 
    5. 
   
   
   
   
  5.     //咱們就要把用戶的賬與密碼取出來存在Seesion中 
    6. 
   
   
   
   
  6.     context.Response.Write("ok:"+(((Model.User)context.Session["User"])).LoginId); 
    7. 
   
   
   
   
  7.      }else{ 
    8. 
   
   
   
   
  8.       context.Response.Write("no:"); 
    9. 
   
   
   
   
  9.      } 
    10. 
   
   
   
   
  10. }else if(action=="login"){ 
    11. 
   
   
   
   
  11. //取到用戶有前臺文本框裏面輸入的值 
    12. 
   
   
   
   
  12. string textName=context.Request.Form["textName"]; 
    13. 
   
   
   
   
  13. string textPwd=context.Request.Form["textPwd"]; 
    14. 
   
   
   
   
  14. //建立一個BLL層 
    15. 
   
   
   
   
  15. BLL.UserManger bll=new BLL.UserManager(); 
    16. 
   
   
   
   
  16. //建立一個Model實體對象 
    17. 
   
   
   
   
  17. Model.User model=null; 
    18. 
   
   
   
   
  18. //建立一個用戶登陸的狀態 
    19. 
   
   
   
   
  19. string msg=string.Empty; 
    20. 
   
   
   
   
  20. //定義一個變量來接收在bll層裏面的用戶登陸的判斷 
    21. 
   
   
   
   
  21. bool b=bll.GetCheckUserLogin(textName,textPwd,out msg,out model); 
    22. 
   
   
   
   
  22. //判斷這個b是否爲true; 
    23. 
   
   
   
   
  23. if(b){ 
    24. 
   
   
   
   
  24. context.Session["User"]=model; 
    25. 
   
   
   
   
  25. context.Response.Write("ok:"+model.LoginId); 
    26. 
   
   
   
   
  26. }else{ 
    27. 
   
   
   
   
  27. context.Response.Write("on:"); 
    28. 
   
   
   
   
  28. } 
    29. 
   
   
   
   
  29. } 
    30. 
  
  
  
  
  在通常處理程序裏面有一個方法是用來檢查用戶登陸的狀態
  在bll層裏面來定義一個這樣的方法GetCheckUserLogin(string name,string pwd,out string msg,out Model.User user)


  
  
  
  
    
   
   
   
   
  1. //定義一個用戶來判斷是否登陸了參數用到了用戶賬號用戶密碼狀態和當前登陸的用戶名 
    2. 
   
   
   
   
  2. public bool GetCheckUserLogin(string name,string pwd,out string msg out Model.User user) 
    3. 
   
   
   
   
  3. { 
    4. 
   
   
   
   
  4. //建立一個DAL層對象 
    5. 
   
   
   
   
  5. DAL.UserServices dal=new DAL.UserServices(); 
    6. 
   
   
   
   
  6. user=dal.GetModel(name);//判斷用戶賬與數據裏面取到的是否相等  這個是用動軟生成的 直接調用裏面的這個取用戶實體的對象方法 
    7. 
   
   
   
   
  7. //若是說這個用戶不存在 
    8. 
   
   
   
   
  8. if(user!=null) 
    9. 
   
   
   
   
  9. { 
    10. 
   
   
   
   
  10. //判斷用戶的登陸狀態是否正常  這是在數據庫裏面 
    11. 
   
   
   
   
  11. if(user.UserState.Name=="正常") 
    12. 
   
   
   
   
  12. { 
    13. 
   
   
   
   
  13. //判斷用戶的密碼是否與數據庫裏面的同樣 
    14. 
   
   
   
   
  14. if(user.LoginPwd=="pwd") 
    15. 
   
   
   
   
  15. { 
    16. 
   
   
   
   
  16. msg="登陸成功"; 
    17. 
   
   
   
   
  17. return true; 
    18. 
   
   
   
   
  18. }else{ 
    19. 
   
   
   
   
  19. msg="用戶名或者密碼錯誤"; 
    20. 
   
   
   
   
  20. return false; 
    21. 
   
   
   
   
  21. } 
    22. 
   
   
   
   
  22. }else{ 
    23. 
   
   
   
   
  23. msg="用戶沒有激活"; 
    24. 
   
   
   
   
  24. return false; 
    25. 
   
   
   
   
  25. } 
    26. 
   
   
   
   
  26. }else{ 
    27. 
   
   
   
   
  27. msg="用戶不存在"; 
    28. 
   
   
   
   
  28. return false; 
    29. 
   
   
   
   
  29. } 
    30. 
   
   
   
   
  30. } 
    31.
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程