Google Reader

Ajax登录页面

by Alexis

at 2010-09-04 17:51:00

original http://www.cnblogs.com/alexis/archive/2010/09/04/1818144.html

作者: Alexis 发表于 2010-09-04 17:51 原文链接 阅读: 1146 评论: 23

登录界面是信息系统提供的必备的功能，是提供给用户提供维护信息的接口。接下来，我来带领大家打造一个漂亮、安全的登录界面，使用的技术是ASP.NET+jQuery

先来看看预览效果

 <p>Ajax<span style="font-family:宋体">登录重点在</span>Ajax<span style="font-family:宋体">，输入用户名和密码后，使用</span>Ajax<span style="font-family:宋体">方式将信息提交到服务器端，服务器端判断时候存在该用户，存在则登录成功并转向管理界面（有时需要写</span>cookie<span style="font-family:宋体">或是利用</span>Session<span style="font-family:宋体">，此处不作讨论），不存在则提示登录失败。</span></p>
 <p><span style="font-family:宋体">基本流程图如下</span></p>
 <p><img alt="" src="http://images.cnblogs.com/cnblogs_com/alexis/ajaxlogin.jpg" border="0"><br>
 </p>
 <p><span style="font-family:宋体">上面是主要思路，为了打造安全的登录，在使用</span>ajax<span style="font-family:宋体">将密码传到服务器端前，我们可以使用</span>MD5<span style="font-family:宋体">对密码进行加密，当然数据库中存储的也是加密后的字符串。</span>jQuery<span style="font-family:宋体">有一款这样的</span>MD5<span style="font-family:宋体">加密插件，使用十分方便。</span></p>
 <p><span style="font-family:宋体">流程知道了，就可以方便实现了。以下是一些主要的代码</span></p>
 <p>Default.aspx<span style="font-family:宋体">：主要是提供超链接，点击会调用thickbox，打开弹出页面。</span></p>
 <br>
 <div><img src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt="" height="16" width="16"><img src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif"><span>代码</span>
 <div>
 <div><span style="color:#0000ff">&lt;</span><span style="color:#800000">div </span><span style="color:#ff0000">style</span><span style="color:#0000ff">=&quot;margin-left:50px; margin-top:50px; &quot;</span><span style="color:#0000ff">&gt;</span><span style="color:#000000"><br>
 欢迎使用后台，</span><span style="color:#0000ff">&lt;</span><span style="color:#800000">a </span><span style="color:#ff0000">href</span><span style="color:#0000ff">=&quot;Login.htm?TB_iframe&amp;height=180&amp;width=350&amp;modal=true&quot;</span><span style="color:#ff0000"> class</span><span style="color:#0000ff">="thickbox"</span><span style="color:#ff0000">   id</span><span style="color:#0000ff">="myToolTip"</span><span style="color:#ff0000">  title</span><span style="color:#0000ff">="点击登录，进入后台管理"</span><span style="color:#ff0000"> </span><span style="color:#0000ff">&gt;</span><span style="color:#000000">点击登录！</span><span style="color:#0000ff">&lt;/</span><span style="color:#800000">a</span><span style="color:#0000ff">&gt;</span><span style="color:#ff0000">&amp;nbsp;</span><span style="color:#000000"> </span><span style="color:#ff0000">&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;</span><span style="color:#000000"> </span><span style="color:#ff0000">&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;</span><span style="color:#000000"><br>
 继续浏览前台，</span><span style="color:#0000ff">&lt;</span><span style="color:#800000">a </span><span style="color:#ff0000">href</span><span style="color:#0000ff">="../Default.aspx"</span><span style="color:#0000ff">&gt;</span><span style="color:#000000">返回前台</span><span style="color:#0000ff">&lt;/</span><span style="color:#800000">a</span><span style="color:#0000ff">&gt;</span><span style="color:#000000"> </span></div>
 </div>
 </div>
 <p><br>
 </p>
 <p>login.htm：真正的登录界面，负责登录逻辑</p>
 <div><img src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif"><span>代码</span>
 <div>
 <div><span style="color:#0000ff">&lt;</span><span style="color:#800000">script </span><span style="color:#ff0000">type</span><span style="color:#0000ff">="text/javascript"</span><span style="color:#ff0000"> src</span><span style="color:#0000ff">="js/jquery-1.3.2.js"</span><span style="color:#0000ff">&gt;&lt;/</span><span style="color:#800000">script</span><span style="color:#0000ff">&gt;</span><span style="color:#000000"><br>
 </span><span style="color:#0000ff">&lt;</span><span style="color:#800000">script </span><span style="color:#ff0000">type</span><span style="color:#0000ff">="text/javascript"</span><span style="color:#0000ff">&gt;</span><span style="background-color:#f5f5f5;color:#000000"><br>
 </span><span style="background-color:#f5f5f5;color:#000000">    $().ready(</span><span style="background-color:#f5f5f5;color:#0000ff">function</span><span style="background-color:#f5f5f5;color:#000000"> () {<br>
 </span><span style="background-color:#f5f5f5;color:#000000">        $(</span><span style="background-color:#f5f5f5;color:#000000">'</span><span style="background-color:#f5f5f5;color:#000000">#Login</span><span style="background-color:#f5f5f5;color:#000000">'</span><span style="background-color:#f5f5f5;color:#000000">).click(</span><span style="background-color:#f5f5f5;color:#0000ff">function</span><span style="background-color:#f5f5f5;color:#000000"> () {<br>
             </span><span style="background-color:#f5f5f5;color:#0000ff">if</span><span style="background-color:#f5f5f5;color:#000000"> ($(</span><span style="background-color:#f5f5f5;color:#000000">'</span><span style="background-color:#f5f5f5;color:#000000">#username</span><span style="background-color:#f5f5f5;color:#000000">'</span><span style="background-color:#f5f5f5;color:#000000">).val() </span><span style="background-color:#f5f5f5;color:#000000">==</span><span style="background-color:#f5f5f5;color:#000000"> </span><span style="background-color:#f5f5f5;color:#000000">""</span><span style="background-color:#f5f5f5;color:#000000"> </span><span style="background-color:#f5f5f5;color:#000000">||</span><span style="background-color:#f5f5f5;color:#000000"> $(</span><span style="background-color:#f5f5f5;color:#000000">'</span><span style="background-color:#f5f5f5;color:#000000">#password</span><span style="background-color:#f5f5f5;color:#000000">'</span><span style="background-color:#f5f5f5;color:#000000">).val() </span><span style="background-color:#f5f5f5;color:#000000">==</span><span style="background-color:#f5f5f5;color:#000000"> </span><span style="background-color:#f5f5f5;color:#000000">""</span><span style="background-color:#f5f5f5;color:#000000">) {<br>
 </span><span style="background-color:#f5f5f5;color:#000000">                alert(</span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">用户名或密码不能为空！</span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">);<br>
 </span><span style="background-color:#f5f5f5;color:#000000">            }<br>
             </span><span style="background-color:#f5f5f5;color:#0000ff">else</span><span style="background-color:#f5f5f5;color:#000000"> {<br>
 </span><span style="background-color:#f5f5f5;color:#000000">                $.ajax({<br>
 </span><span style="background-color:#f5f5f5;color:#000000">                    type: </span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">POST</span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">,<br>
 </span><span style="background-color:#f5f5f5;color:#000000">                    url: </span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">Ajax/LoginHandler.ashx</span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">,<br>
 </span><span style="background-color:#f5f5f5;color:#000000">                    data: </span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">username=</span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000"> </span><span style="background-color:#f5f5f5;color:#000000">+</span><span style="background-color:#f5f5f5;color:#000000"> escape($(</span><span style="background-color:#f5f5f5;color:#000000">'</span><span style="background-color:#f5f5f5;color:#000000">#username</span><span style="background-color:#f5f5f5;color:#000000">'</span><span style="background-color:#f5f5f5;color:#000000">).val()) </span><span style="background-color:#f5f5f5;color:#000000">+</span><span style="background-color:#f5f5f5;color:#000000"> </span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">&amp;password=</span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000"> </span><span style="background-color:#f5f5f5;color:#000000">+</span><span style="background-color:#f5f5f5;color:#000000"> escape($(</span><span style="background-color:#f5f5f5;color:#000000">'</span><span style="background-color:#f5f5f5;color:#000000">#password</span><span style="background-color:#f5f5f5;color:#000000">'</span><span style="background-color:#f5f5f5;color:#000000">).val()),<br>
 </span><span style="background-color:#f5f5f5;color:#000000">                    beforeSend: </span><span style="background-color:#f5f5f5;color:#0000ff">function</span><span style="background-color:#f5f5f5;color:#000000"> () {<br>
 </span><span style="background-color:#f5f5f5;color:#000000">                        $(</span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">#loading</span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">).css(</span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">display</span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">, </span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">block</span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">); </span><span style="background-color:#f5f5f5;color:#008000">//</span><span style="background-color:#f5f5f5;color:#008000">点击登录后显示loading，隐藏输入框</span><span style="background-color:#f5f5f5;color:#008000"><br>
 </span><span style="background-color:#f5f5f5;color:#000000">                        $(</span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">#login</span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">).css(</span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">display</span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">, </span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">none</span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">);<br>
 </span><span style="background-color:#f5f5f5;color:#000000">                    },<br>
 </span><span style="background-color:#f5f5f5;color:#000000">                    success: </span><span style="background-color:#f5f5f5;color:#0000ff">function</span><span style="background-color:#f5f5f5;color:#000000"> (msg) {<br>
 </span><span style="background-color:#f5f5f5;color:#000000">                        $(</span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">#loading</span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">).hide(); </span><span style="background-color:#f5f5f5;color:#008000">//</span><span style="background-color:#f5f5f5;color:#008000">隐藏loading</span><span style="background-color:#f5f5f5;color:#008000"><br>
 </span><span style="background-color:#f5f5f5;color:#000000">                        </span><span style="background-color:#f5f5f5;color:#0000ff">if</span><span style="background-color:#f5f5f5;color:#000000"> (msg </span><span style="background-color:#f5f5f5;color:#000000">==</span><span style="background-color:#f5f5f5;color:#000000"> </span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">success</span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">) {<br>
                             </span><span style="background-color:#f5f5f5;color:#008000">//</span><span style="background-color:#f5f5f5;color:#008000">parent.tb_remove();</span><span style="background-color:#f5f5f5;color:#008000"><br>
 </span><span style="background-color:#f5f5f5;color:#000000">                            parent.document.location.href </span><span style="background-color:#f5f5f5;color:#000000">=</span><span style="background-color:#f5f5f5;color:#000000"> </span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">admin.htm</span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">; </span><span style="background-color:#f5f5f5;color:#008000">//</span><span style="background-color:#f5f5f5;color:#008000">如果登录成功则跳到管理界面</span><span style="background-color:#f5f5f5;color:#008000"><br>
 </span><span style="background-color:#f5f5f5;color:#000000">                            parent.tb_remove();<br>
 </span><span style="background-color:#f5f5f5;color:#000000">                        }<br>
                         </span><span style="background-color:#f5f5f5;color:#0000ff">if</span><span style="background-color:#f5f5f5;color:#000000"> (msg </span><span style="background-color:#f5f5f5;color:#000000">==</span><span style="background-color:#f5f5f5;color:#000000"> </span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">fail</span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">) {<br>
 </span><span style="background-color:#f5f5f5;color:#000000">                            alert(</span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">登录失败！</span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">);<br>
 </span><span style="background-color:#f5f5f5;color:#000000">                        }<br>
 </span><span style="background-color:#f5f5f5;color:#000000">                    },<br>
 </span><span style="background-color:#f5f5f5;color:#000000">                    complete: </span><span style="background-color:#f5f5f5;color:#0000ff">function</span><span style="background-color:#f5f5f5;color:#000000"> (data) {<br>
 </span><span style="background-color:#f5f5f5;color:#000000">                        $(</span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">#loading</span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">).css(</span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">display</span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">, </span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">none</span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">); </span><span style="background-color:#f5f5f5;color:#008000">//</span><span style="background-color:#f5f5f5;color:#008000">点击登录后显示loading，隐藏输入框</span><span style="background-color:#f5f5f5;color:#008000"><br>
 </span><span style="background-color:#f5f5f5;color:#000000">                        $(</span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">#login</span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">).css(</span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">display</span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">, </span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">block</span><span style="background-color:#f5f5f5;color:#000000">"</span><span style="background-color:#f5f5f5;color:#000000">);<br>
 </span><span style="background-color:#f5f5f5;color:#000000">                    },<br>
 </span><span style="background-color:#f5f5f5;color:#000000">                    error: </span><span style="background-color:#f5f5f5;color:#0000ff">function</span><span style="background-color:#f5f5f5;color:#000000"> (XMLHttpRequest, textStatus, thrownError) {<br>
 </span><span style="background-color:#f5f5f5;color:#000000">                    }<br>
 </span><span style="background-color:#f5f5f5;color:#000000">                });<br>
 </span><span style="background-color:#f5f5f5;color:#000000">            }<br>
 </span><span style="background-color:#f5f5f5;color:#000000">        });<br>
 </span><span style="background-color:#f5f5f5;color:#000000">    });<br>
 </span><span style="color:#0000ff">&lt;/</span><span style="color:#800000">script</span><span style="color:#0000ff">&gt;</span><span style="color:#000000"><br>
 <br>
 </span><span style="color:#0000ff">&lt;</span><span style="color:#800000">div </span><span style="color:#ff0000">id</span><span style="color:#0000ff">="loading"</span><span style="color:#ff0000"> style</span><span style="color:#0000ff">=&quot;text-align: center; display: none; padding-top: 10%&quot;</span><span style="color:#0000ff">&gt;</span><span style="color:#000000"><br>
     </span><span style="color:#0000ff">&lt;</span><span style="color:#800000">img </span><span style="color:#ff0000">src</span><span style="color:#0000ff">="images/loadingajax.gif"</span><span style="color:#ff0000"> alt</span><span style="color:#0000ff">="loading"</span><span style="color:#ff0000"> </span><span style="color:#0000ff">/&gt;</span><span style="color:#000000"><br>
 </span><span style="color:#0000ff">&lt;/</span><span style="color:#800000">div</span><span style="color:#0000ff">&gt;</span><span style="color:#000000"><br>
 </span><span style="color:#0000ff">&lt;</span><span style="color:#800000">div </span><span style="color:#ff0000">id</span><span style="color:#0000ff">="login"</span><span style="color:#ff0000"> style</span><span style="color:#0000ff">=&quot;text-align: center&quot;</span><span style="color:#0000ff">&gt;</span><span style="color:#000000"><br>
 </span><span style="color:#0000ff">&lt;</span><span style="color:#800000">div </span><span style="color:#ff0000">style</span><span style="color:#0000ff">=&quot;position:absolute; right:0; top:0&quot;</span><span style="color:#0000ff">&gt;&lt;</span><span style="color:#800000">img </span><span style="color:#ff0000">src</span><span style="color:#0000ff">="images/closebox.png"</span><span style="color:#ff0000"> onclick</span><span style="color:#0000ff">="parent.tb_remove()"</span><span style="color:#ff0000"> alt</span><span style="color:#0000ff">="点击关闭"</span><span style="color:#ff0000"> style</span><span style="color:#0000ff">="cursor:pointer"</span><span style="color:#ff0000">  </span><span style="color:#0000ff">/&gt;&lt;/</span><span style="color:#800000">div</span><span style="color:#0000ff">&gt;</span><span style="color:#000000"><br>
 <br>
     </span><span style="color:#0000ff">&lt;</span><span style="color:#800000">table </span><span style="color:#ff0000">border</span><span style="color:#0000ff">="0"</span><span style="color:#ff0000"> cellpadding</span><span style="color:#0000ff">="3"</span><span style="color:#ff0000"> cellspacing</span><span style="color:#0000ff">="3"</span><span style="color:#ff0000"> style</span><span style="color:#0000ff">=&quot;margin: 0 auto;&quot;</span><span style="color:#0000ff">&gt;</span><span style="color:#000000"><br>
         </span><span style="color:#0000ff">&lt;</span><span style="color:#800000">tr</span><span style="color:#0000ff">&gt;</span><span style="color:#000000"><br>
             </span><span style="color:#0000ff">&lt;</span><span style="color:#800000">td </span><span style="color:#ff0000">style</span><span style="color:#0000ff">=&quot;text-align: right; padding: 10px&quot;</span><span style="color:#0000ff">&gt;</span><span style="color:#000000"><br>
                 </span><span style="color:#0000ff">&lt;</span><span style="color:#800000">label</span><span style="color:#0000ff">&gt;</span><span style="color:#000000"><br>
 </span><span style="color:#000000">                    用户名:</span><span style="color:#0000ff">&lt;/</span><span style="color:#800000">label</span><span style="color:#0000ff">&gt;</span><span style="color:#000000"><br>
             </span><span style="color:#0000ff">&lt;/</span><span style="color:#800000">td</span><span style="color:#0000ff">&gt;</span><span style="color:#000000"><br>
             </span><span style="color:#0000ff">&lt;</span><span style="color:#800000">td</span><span style="color:#0000ff">&gt;</span><span style="color:#000000"><br>
                 </span><span style="color:#0000ff">&lt;</span><span style="color:#800000">input </span><span style="color:#ff0000">id</span><span style="color:#0000ff">="username"</span><span style="color:#ff0000"> type</span><span style="color:#0000ff">="text"</span><span style="color:#ff0000"> size</span><span style="color:#0000ff">="20"</span><span style="color:#ff0000"> </span><span style="color:#0000ff">/&gt;</span><span style="color:#000000"><br>
             </span><span style="color:#0000ff">&lt;/</span><span style="color:#800000">td</span><span style="color:#0000ff">&gt;</span><span style="color:#000000"><br>
         </span><span style="color:#0000ff">&lt;/</span><span style="color:#800000">tr</span><span style="color:#0000ff">&gt;</span><span style="color:#000000"><br>
         </span><span style="color:#0000ff">&lt;</span><span style="color:#800000">tr</span><span style="color:#0000ff">&gt;</span><span style="color:#000000"><br>
             </span><span style="color:#0000ff">&lt;</span><span style="color:#800000">td </span><span style="color:#ff0000">style</span><span style="color:#0000ff">=&quot;text-align: right; padding: 10px&quot;</span><span style="color:#0000ff">&gt;</span><span style="color:#000000"><br>
                 </span><span style="color:#0000ff">&lt;</span><span style="color:#800000">label</span><span style="color:#0000ff">&gt;</span><span style="color:#000000"><br>
 </span><span style="color:#000000">                    密码:</span><span style="color:#0000ff">&lt;/</span><span style="color:#800000">label</span><span style="color:#0000ff">&gt;</span><span style="color:#000000"><br>
             </span><span style="color:#0000ff">&lt;/</span><span style="color:#800000">td</span><span style="color:#0000ff">&gt;</span><span style="color:#000000"><br>
             </span><span style="color:#0000ff">&lt;</span><span style="color:#800000">td</span><span style="color:#0000ff">&gt;</span><span style="color:#000000"><br>
                 </span><span style="color:#0000ff">&lt;</span><span style="color:#800000">input </span><span style="color:#ff0000">id</span><span style="color:#0000ff">="password"</span><span style="color:#ff0000"> type</span><span style="color:#0000ff">="password"</span><span style="color:#ff0000"> size</span><span style="color:#0000ff">="20"</span><span style="color:#ff0000"> </span><span style="color:#0000ff">/&gt;</span><span style="color:#000000"><br>
             </span><span style="color:#0000ff">&lt;/</span><span style="color:#800000">td</span><span style="color:#0000ff">&gt;</span><span style="color:#000000"><br>
         </span><span style="color:#0000ff">&lt;/</span><span style="color:#800000">tr</span><span style="color:#0000ff">&gt;</span><span style="color:#000000"><br>
         </span><span style="color:#0000ff">&lt;</span><span style="color:#800000">tr </span><span style="color:#ff0000">align</span><span style="color:#0000ff">="right"</span><span style="color:#0000ff">&gt;</span><span style="color:#000000"><br>
             </span><span style="color:#0000ff">&lt;</span><span style="color:#800000">td </span><span style="color:#ff0000">colspan</span><span style="color:#0000ff">="2"</span><span style="color:#0000ff">&gt;</span><span style="color:#000000"><br>
                 </span><span style="color:#0000ff">&lt;</span><span style="color:#800000">input </span><span style="color:#ff0000">type</span><span style="color:#0000ff">="submit"</span><span style="color:#ff0000"> id</span><span style="color:#0000ff">="Login"</span><span style="color:#ff0000"> value</span><span style="color:#0000ff">=&quot;&amp;nbsp;&amp;nbsp;登&amp;nbsp;录&amp;nbsp;&amp;nbsp;&quot;</span><span style="color:#ff0000"> style</span><span style="color:#0000ff">=&quot;margin-right: 50px&quot;</span><span style="color:#0000ff">&gt;</span><span style="color:#ff0000">&amp;nbsp;</span><span style="color:#000000"><br>
                 </span><span style="color:#0000ff">&lt;</span><span style="color:#800000">input </span><span style="color:#ff0000">type</span><span style="color:#0000ff">="submit"</span><span style="color:#ff0000"> id</span><span style="color:#0000ff">="LoginCancel"</span><span style="color:#ff0000"> value</span><span style="color:#0000ff">=&quot;&amp;nbsp;&amp;nbsp;取&amp;nbsp;消&amp;nbsp;&amp;nbsp;&quot;</span><span style="color:#ff0000"> onclick</span><span style="color:#0000ff">="parent.tb_remove()"</span><span style="color:#0000ff">&gt;</span><span style="color:#000000"><br>
             </span><span style="color:#0000ff">&lt;/</span><span style="color:#800000">td</span><span style="color:#0000ff">&gt;</span><span style="color:#000000"><br>
         </span><span style="color:#0000ff">&lt;/</span><span style="color:#800000">tr</span><span style="color:#0000ff">&gt;</span><span style="color:#000000"><br>
     </span><span style="color:#0000ff">&lt;/</span><span style="color:#800000">table</span><span style="color:#0000ff">&gt;</span><span style="color:#000000"><br>
 </span><span style="color:#0000ff">&lt;/</span><span style="color:#800000">div</span><span style="color:#0000ff">&gt;</span><span style="color:#000000"><br>
 </span></div>
 </div>
 </div>
 <p><br>
 </p>
 <p>LoginHandler.ashx：ajax处理类，简单的逻辑</p>
 <div><img src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif"><span>代码</span>
 <div>
 <div><span style="color:#008000">//</span><span style="color:#008000">此处连接数据库查看是否有此用户，此处为了方便起见，直接判断</span><span style="color:#008000"><br>
 </span><span style="color:#000000">            </span><span style="color:#0000ff">if</span><span style="color:#000000"> (username </span><span style="color:#000000">==</span><span style="color:#000000"> </span><span style="color:#800000">"</span><span style="color:#800000">admin</span><span style="color:#800000">"</span><span style="color:#000000"> </span><span style="color:#000000">&amp;&amp;</span><span style="color:#000000"> password </span><span style="color:#000000">==</span><span style="color:#000000"> </span><span style="color:#800000">"</span><span style="color:#800000">1</span><span style="color:#800000">"</span><span style="color:#000000">)<br>
             {<br>
                 context.Response.Write(</span><span style="color:#800000">"</span><span style="color:#800000">success</span><span style="color:#800000">"</span><span style="color:#000000">);<br>
                 </span><span style="color:#008000">//</span><span style="color:#008000">存储session</span><span style="color:#008000"><br>
 </span><span style="color:#000000">            }<br>
             </span><span style="color:#0000ff">else</span><span style="color:#000000"><br>
             {<br>
                 context.Response.Write(</span><span style="color:#800000">"</span><span style="color:#800000">fail</span><span style="color:#800000">"</span><span style="color:#000000">);<br>
             }</span></div>
 </div>
 </div>
 <p><br>
 </p>
 <p> ok，一个简单的登录功能就完成了，当然此处在登录的时候没有进行密码加密。</p>
 <p>下面我们来看看jQuery的加密插件MD5插件， 使用十分方便，加入md5.js的引用就可以使用$.md5()函数对字符串进行加密，<br>
 </p>
 <p>如下对上述代码做稍微改变，即可看到加密后的字符串， <br>
 </p>
 <p>login.htm中： <br>
 </p>
 <p> data: &quot;username=&quot; + escape($(&#39;#username&#39;).val()) + &quot;&amp;password=&quot; + $.md5(escape($(&#39;#password&#39;).val())),</p>
 <p>success: function (msg) {<br>
                         $(&quot;#loading&quot;).hide(); //隐藏loading<br>
                         alert(msg);<br>
                         if (msg == &quot;success&quot;) {<br>
                             //parent.tb_remove();<br>
                             parent.document.location.href = &quot;admin.htm&quot;; //如果登录成功则跳到管理界面<br>
                             parent.tb_remove();<br>
                         }<br>
                         if (msg == &quot;fail&quot;) {<br>
                             alert(&quot;登录失败！&quot;);<br>
                         }<br>
                     }</p>
 <p> LoginHandler.ashx中加密码返回即可：</p>
 <p>context.Response.Write(password); </p>
 <p>ok，再次运行程序会弹出 输入密码的MD5加密之后的字符串。</p>
 <p> </p>
 <p>以上是比较简陋的见解，大家需要源代码的可以留言，打包发到邮箱 <br>
 </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p><img src="http://www.cnblogs.com/alexis/aggbug/1818144.html?type=1" width="1" height="1" alt=""><p>评论: 23　<a href="http://www.cnblogs.com/alexis/archive/2010/09/04/1818144.html#pagedcomment">查看评论</a>　<a href="http://www.cnblogs.com/alexis/archive/2010/09/04/1818144.html#commentform">发表评论</a></p><p><a href="http://job.cnblogs.com/">程序员找工作，就在博客园</a></p><hr><p>最新新闻：<br>· <a href="http://news.cnblogs.com/n/73185/">PC厂商进入微利时代 开辟新市场增加收入</a><span style="color:gray">(2010-09-05 11:43)</span><br>· <a href="http://news.cnblogs.com/n/73184/">方舟子个人保镖下周上岗 律师称将长期进行保护</a><span style="color:gray">(2010-09-05 11:38)</span><br>· <a href="http://news.cnblogs.com/n/73183/">索尼发布GoogleTV 有望今秋在美国销售</a><span style="color:gray">(2010-09-05 11:35)</span><br>· <a href="http://news.cnblogs.com/n/73179/">500部微软Zune HD将登陆美联航班机</a><span style="color:gray">(2010-09-05 11:22)</span><br>· <a href="http://news.cnblogs.com/n/73180/">Vidyo将视频会议押宝于iPad和iPhone</a><span style="color:gray">(2010-09-05 11:20)</span><br></p><p>编辑推荐：<a href="http://news.cnblogs.com/n/72989/">一些鲜为人知的编程事实</a><br></p><p>网站导航：<a href="http://www.cnblogs.com">博客园首页</a>  <a href="http://home.cnblogs.com/">个人主页</a>  <a href="http://news.cnblogs.com">新闻</a>  <a href="http://home.cnblogs.com/ing/">闪存</a>  <a href="http://home.cnblogs.com/group/">小组</a>  <a href="http://space.cnblogs.com/q/">博问</a>  <a href="http://space.cnblogs.com">社区</a>  <a href="http://kb.cnblogs.com">知识库</a></p>