這次帶給大家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（ ）請求。 #推薦閱讀：
ajax怎麼提交form表單與實作檔案上傳
#ajax後台success上傳的json資料如何處理
#
以上是Ajax做出帶有驗證碼的局部刷新登入功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
