Ajax實作帶有驗證碼的局部刷新登入介面

許多登入介面都有驗證碼功能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=&#39;js/jquery-1.9.1.js&#39;></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中文網其他相關文章！