Ajax+Struts2怎麼實作使用者輸入驗證碼校驗功能

這次帶給大家Ajax+Struts2怎麼實作使用者輸入驗證碼校驗功能，Ajax+Struts2實作使用者輸入驗證碼校驗功能的注意事項有哪些，下面就是實戰案例，一起來看一下。

眾所周知，驗證碼在我們的生活中都是非常常見的，很多公司都在各種折騰各種各樣的驗證碼，這裡簡要的用一個小案例來實現驗證碼的功能（ ps:其實我挺討厭驗證碼這個東西的）。

今天分享的是透過ajax來動態的驗證驗證碼輸入是否正確。我們這裡採用的是ajax+struts2來做的這個驗證。 我們新建一個web工程。然後需要導入struts的對應包。之後我們需要寫一個類別來產生驗證碼。

這裡命名為01_image.jsp，這類的主要功能就是產生驗證碼，裡面是各種畫線條，隨機數字等，我這裡設定的是5個數字的驗證，如果你想要改成其他的也可以，大致思路就是在產生數字的那個循環那裡加上字母就可以了。

接下來把輸入驗證碼的html頁面寫好，我這裡是些在了一個jsp檔案中的。命名為checkcode.jsp

<th>验证码:</th>
<td><input></td>
<td><img  src="/static/imghwm/default1.png" data-src="01_image.jsp" class="lazy" alt="Ajax+Struts2怎麼實作使用者輸入驗證碼校驗功能" ></td>
<td></td>
 

然後給這個檔案加上javascript程式碼，這裡使用的當然就是一個ajax啦，對於ajax的編碼步驟之前已經寫的很詳細了，所以我們這裡就直接使用了。 對於ajax.js寫好後放到js目錄下面，然後再找個checkcode.jsp中引入中國js檔案ajax.js的內容：

//创建AJAX异步对象，即XMLHttpRequest
function createAJAX(){
var ajax = null;
try{
ajax = new ActiveXObject("microsoft.xmlhttp");
}catch(e1){
try{
ajax = new XMLHttpRequest();
}catch(e2){
alert("你的浏览器不支持ajax，请更换浏览器");
}
}
return ajax;
}

然後就是chenkcode中的js內容了

//去掉两边的空格
function trim(str){
str=str.replace(/^\s*/,"");//从左侧开始，把空格去掉
str=str.replace(/\s*$/,""); //从右侧开始，把K歌都去掉
return str;
}
document.getElementById("checkcodeID").onkeyup=function(){
var checkcode=this.value;
checkcode=trim(checkcode);
if(checkcode.length==5){
var ajax=createAJAX();
var method="POST";
var url = "${pageContext.request.contextPath}/checkRequest?time="+new Date().getTime();
ajax.open(method,url);
//设置ajax请求头为post，它会将请求的汉字自动进行utf-8的编码
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
var content="checkcode="+checkcode;
ajax.send(content);
ajax.onreadystatechange=function(){
if(ajax.readyState==4){
if(ajax.status==200){
var tip=ajax.responseText;
var img=document.createElement("img");
img.src=tip;
img.style.width="14px";
img.style.height="14px";
var td=document.getElementById("resID");
td.innerHTML="";
td.appendChild(img);
}
} 
} 
}else{
var td=document.getElementById("resID");
td.innerHTML="";
}
}

接著開始寫伺服器端的程式碼，進行校驗的話就需要這樣的一個類別了：

package cn.tf.checkcode;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;
//验证码检查
public class CheckcodeAction extends ActionSupport{
private String checkcode;
public void setCheckcode(String checkcode) {
this.checkcode = checkcode;
}
/**
* 验证
* @throws IOException 
*/
public String check() throws IOException {
//图片路径
String tip="images/a.jpg";
//从服务器获取session中的验证码
String checkcodeServer=(String) ActionContext.getContext().getSession().get("CHECKNUM");
if(checkcode.equals(checkcodeServer)){
tip="images/b.jpg";
}
//以IO流的方式将tip变量输出到ajax异步对象中
HttpServletResponse response=ServletActionContext.getResponse();
response.setContentType("text/html;charset=UTF-8");
PrintWriter pw=response.getWriter();
pw.write(tip);
pw.flush();
pw.close();
return null;
}
}

最後在struts.xml檔案中寫入對應的方法。

<struts>
<package> 
<action name="checkRequest" class="cn.tf.checkcode.CheckcodeAction" method="check">
</action>
</package>
</struts>

運行結果如下：驗證成功則傳回綠色的小勾，錯誤則紅色的叉。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Ajax的反向使用

#jQuery.ajaxWebService請求WebMethod處理Ajax

#

以上是Ajax+Struts2怎麼實作使用者輸入驗證碼校驗功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！