現在的登錄界面大多數都帶有：驗證碼的功能+驗證碼局部刷新+ajax登錄。用ajax登錄的好處最明顯就是速度快，URL地址沒有變化。所有現在登錄功能很少再用form表單post提交了，大多數都已經采用了ajax局部訪問后臺然后解析返回值并顯示結果到界面上面。理論還是要拿來實踐才能驗證的，下面直接上代碼。

運行界面：

1.驗證碼后臺訪問部分上一篇博客已經介紹多了，這里介紹如何利用img中src實現局部刷新驗證碼的功能。

html部分：

<p><label class="lbright">驗證碼：</label><span><input type="text" name="validcode" style="width:70px; vertical-align:middle;" id="validcode"/><img id="codePic" src="http://127.0.0.1:8888/TP/codePic" width="60" height="21" style="vertical-align:middle;cursor:pointer;"/> </span> <a class="blurry" id="newPic" onclick="getPic();">看不清楚，換一張</a></p> 

js部分：

<script type="text/javascript">function getPic(){ $("#codePic").attr("src","http://127.0.0.1:8888/TP/codePic?flag="+Math.random()); };</script>

這部分最重要的就是 $("#codePic").attr("src","http://127.0.0.1:8888/TP/codePic?flag="+Math.random()); 這部分的代碼。如果不加flag="+Math.random()是實現不了局部刷新的功能的。因為src中如果每次訪問的地址一樣的話就會發生不更新的情況。具體為什么會發生這種情況大家可以自己去研究。而codePic其實是一個action。這個action的功能是利用java畫筆畫出驗證碼并打包成圖片返回給img中的src。

2.利用bootstrap中的modal實現對話框的功能。因為登錄提交前需要驗證用戶名或密碼是否為空等判斷，如果出現錯誤就需要彈出對話框提示用戶。這里驗證部分用js實現，對話框部分用bootstrap的modal實現。

html對話框部分：

<div class="modal" id="mymodal" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button><h4 class="modal-title">親，您好</h4></div><div class="modal-body" id="dialogs"><p></p></div><div class="modal-footer"><button type="button" data-dismiss="modal" style="color: #FFFFFF;background-color:#FB8F02; text-align:center;padding:10px;border: 1px solid #dedede;-moz-border-radius: 15px;-webkit-border-radius: 15px; border-radius:15px;vertical-align:middle;">我知道了</button></div></div><!-- /.modal-content --></div><!-- /.modal-dialog --></div><!-- /.modal -->