Ajax登入頁面 __Ajax

登入介面是資訊系統提供的必備的功能，是提供給使用者提供維護資訊的介面。接下來， 我來帶領大家打造一個漂亮、安全的登入介面，使用的技術是 ASP.NET+jQuery

先來看看預覽效果

 

Ajax登入重點在 Ajax，輸入使用者名稱和密碼後，使用 Ajax方式將資訊提交到伺服器端，伺服器端判斷時候存在該使用者，存在則登入成功並轉向管理介面（有時需要寫 cookie或是利用 Session，此處不作討論），不存在則提示登入失敗。

基本流程圖如下

上面是主要思路，為了打造安全的登入，在使用 ajax將密碼傳到伺服器端前，我們可以使用 MD5對密碼進行加密，當然資料庫中儲存的也是加密後的字串。 jQuery有一款這樣的 MD5加 密外掛程式，使用十分方便。

流程知道了，就可以方便實現了。以下是一些主要的代碼

Default.aspx：主要是提供超連結，點擊會調用thickbox，開啟 彈出頁面。

  代碼
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--> < div  style ="margin-left:50px; margin-top:50px; " >
歡迎使用後台， < a  href ="Login.htm?TB_iframe&height=180&width=350&modal=true"  class ="thickbox"    id ="myToolTip"   title ="點擊 登入，進入後台管理"   > 點擊登入。 </ a >                     
繼續瀏覽前台， < a  href ="../Default.aspx" > 返回前台 </ a >  

 

login.htm：真正的登入介面，負責登入邏輯 代碼
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--> < script  type ="text/javascript"  src ="js/jquery-1.3.2.js" ></ script >
< script  type ="text/javascript" >
    $().ready( function  () {
        $( ' #Login ' ).click( function  () {
             if  ($( ' #username ' ).val()  ==   ""   ||  $( ' #password ' ).val()  ==   "" ) {
                alert( " 使用者名稱或密 碼不可為空。 " );
            }
             else  {
                $.ajax({
                    type:  " POST " ,
                    url:  " Ajax/LoginHandler.ashx " ,
                    data:  " username= "   +  escape($( ' #username ' ).val())  +   " &password= "   +  escape($( ' #password ' ).val()),
                    beforeSend:  function  () {
                        $( " #loading " ).css( " display " ,  " block " );  // 點擊 登入後顯示loading，隱藏輸入框
                        $( " #login " ).css( " display " ,  " none " );
                    },
                    success:  function  (msg) {
                        $( " #loading " ).hide();  // 隱藏 loading
                         if  (msg  ==   " success " ) {
                             // parent.tb_remove();
                            parent.document.location.href  =   " admin.htm " ;  // 如果 登入成功則跳到管理介面
                            parent.tb_remove();
                        }
                         if  (msg  ==   " fail " ) {
                            alert( " 登入失 敗。 " );
                        }
                    },
                    complete:  function  (data) {
                        $( " #loading " ).css( " display " ,  " none " );  // 點擊 登入後顯示loading，隱藏輸入框
                        $( " #login " ).css( " display " ,  " block " );
                    },
                    error:  function  (XMLHttpRequest, textStatus, thrownError) {
                    }
                });
            }
        });
    });
</ script >

< div  id ="loading"  style ="text-align: center; display: none; padding-top: 10%" >
     < img  src ="images/loadingajax.gif"  alt ="loading"   />
</ div >
< div  id ="login"  style ="text-align: center" >
< div  style ="position:absolute; right:0; top:0" >< img  src ="images/closebox.png"  onclick ="parent.tb_remove()"  alt ="點擊關閉"  style ="cursor:pointer"    /></ div >

     < table  border ="0"  cellpadding ="3"  cellspacing ="3"  style ="margin: 0 auto;" >
         < tr >
             < td  style ="text-align: right; padding: 10px" >
                 < label >
                    使用者名稱: </ label >
             </ td >
             < td >
                 < input  id ="username"  type ="text"  size