許多登入介面都有驗證碼功能ajax局部刷新效果，接下來透過本文分享給大家ajax實作帶有驗證碼的局部刷新登入介面，對ajax有興趣的朋友一起看看吧
現在的登入介面大多都帶有：驗證碼的功能+驗證碼局部刷新+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中如果每次訪問的地址一樣的話就會發生不更新的情況。具體為什麼會發生這種情況大家可以自己去研究。功能。 #html對話框部分：
<p class="modal" id="mymodal" tabindex="-1"> <p class="modal-dialog"> <p class="modal-content"> <p 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> </p> <p class="modal-body" id="dialogs"> <p></p> </p> <p 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> </p> </p><!-- /.modal-content --> </p><!-- /.modal-dialog --> </p><!-- /.modal -->
js驗證部分：
<script type="text/javascript">
function dialog(){
$("#mymodal").modal("toggle");
};
function login(){
var userName=document.getElementById("username").value;
var pwd=document.getElementById("password").value;
var validcode=document.getElementById("validcode").value;
var matchResult=true;
if(userName==""){
document.getElementById("dialogs").innerHTML="<h3>用户账号不能为空！</h3>";
dialog();
matchResult=false;
}else if(pwd==""){
document.getElementById("dialogs").innerHTML="<h3>用户密码不能为空！</h3>";
dialog();
matchResult=false;
}else if(validcode==""){
document.getElementById("dialogs").innerHTML="<h3>验证码不能为空！</h3>";
dialog();
matchResult=false;
}else if(userName.length<6||userName.length>20){
document.getElementById("dialogs").innerHTML="<h3>用户名长度应在6到20个字符之间！</h3>";
dialog();
matchResult=false;
}else if(pwd.length<6||pwd.length>20){
document.getElementById("dialogs").innerHTML="<h3>密码或重复密码长度应在6到20个字符之间！</h3>";
dialog();
matchResult=false;
}
};
</script>需要導入的css、js檔：
<link href="css/global.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src='js/jquery-1.9.1.js'></script> <script src="js/jquery.min.js"></script> <script src="js/jquery.js"></script> <script src="js/bootstrap.min.js"></script>
這裡要注意的就是導入的CSS，js文件是否正確。 //127.0.0.1:8888/TP/main.jsp"作用相當於重定向。我的ajax不是原生的js中的ajax而是JQuery封裝好的ajax。大家可以去搜尋JQuery中$.post（ ）請求。 ！
##jquery彈出視窗+ajax局部提示,該怎麼處理#以上是Ajax實作帶有驗證碼的局部刷新登入介面的詳細內容。更多資訊請關注PHP中文網其他相關文章！
