您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“Ajax+Struts2如何實(shí)現(xiàn)驗(yàn)證碼驗(yàn)證功能”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Ajax+Struts2如何實(shí)現(xiàn)驗(yàn)證碼驗(yàn)證功能”這篇文章吧。
分享的是通過(guò)ajax來(lái)動(dòng)態(tài)的驗(yàn)證驗(yàn)證碼輸入是否正確。我們這里采用的是ajax+struts2來(lái)做的這個(gè)驗(yàn)證。 我們新建一個(gè)web工程。然后需要導(dǎo)入struts的相應(yīng)包。之后我們需要寫(xiě)一個(gè)類來(lái)生成驗(yàn)證碼。
這里命名為01_image.jsp,這類的主要功能就是生成驗(yàn)證碼,里面是各種畫(huà)線條,隨機(jī)數(shù)字等,我這里設(shè)置的是5個(gè)數(shù)字的驗(yàn)證,如果你想要改成其他的也可以,大致思路就是在生成數(shù)字的那個(gè)循環(huán)那里加上字母就可以了。
<%@ page language="java" pageEncoding="UTF-8"%> <%@ page contentType="image/jpeg" import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" %> <%! public Color getColor(){ Random random = new Random(); int r = random.nextInt(256);//0-255 int g = random.nextInt(256); int b = random.nextInt(256); return new Color(r,g,b); } public String getNum(){ String str = ""; Random random = new Random(); for(int i=0;i<5;i++){ str += random.nextInt(10);//0-9 } return str; } %> <% response.setHeader("pragma", "no-cache"); response.setHeader("cache-control", "no-cache"); response.setDateHeader("expires", 0); BufferedImage image = new BufferedImage(80,30,BufferedImage.TYPE_INT_RGB); Graphics g = image.getGraphics(); g.setColor(new Color(200,200,200)); g.fillRect(0,0,80,30); for (int i = 0; i < 50; i++) { Random random = new Random(); int x = random.nextInt(80); int y = random.nextInt(30); int xl = random.nextInt(x+10); int yl = random.nextInt(y+10); g.setColor(getColor()); g.drawLine(x, y, x + xl, y + yl); } g.setFont(new Font("serif", Font.BOLD,16)); g.setColor(Color.BLACK); String checkNum = getNum();//"2525" StringBuffer sb = new StringBuffer(); for(int i=0;i<checkNum.length();i++){ sb.append(checkNum.charAt(i)+" ");//"2 5 2 5" } g.drawString(sb.toString(),15,20); session.setAttribute("CHECKNUM",checkNum);//2525 //通過(guò)字節(jié)輸出流輸出 ImageIO.write(image,"jpeg",response.getOutputStream()); out.clear(); out = pageContext.pushBody(); %>
接下來(lái)把輸入驗(yàn)證碼的html頁(yè)面寫(xiě)好,我這里是些在了一個(gè)jsp文件中的。命名為checkcode.jsp
<th>驗(yàn)證碼:</th> <td><input type="text" name="checkcode" id="checkcodeID" maxlength="5" /></td> <td><img src="01_image.jsp" id="imgID" /></td> <td id="resID"></td> </tr> </table> </form>
然后給這個(gè)文件添加javascript代碼,這里使用的當(dāng)然就是一個(gè)ajax啦,對(duì)于ajax的編碼步驟之前已經(jīng)寫(xiě)的很詳細(xì)了,所以我們這里就直接使用了。 對(duì)于ajax.js寫(xiě)好后放到j(luò)s目錄下面,然后再找個(gè)checkcode.jsp中引入中國(guó)js文件 ajax.js的內(nèi)容:
//創(chuàng)建AJAX異步對(duì)象,即XMLHttpRequest function createAJAX(){ var ajax = null; try{ ajax = new ActiveXObject("microsoft.xmlhttp"); }catch(e1){ try{ ajax = new XMLHttpRequest(); }catch(e2){ alert("你的瀏覽器不支持ajax,請(qǐng)更換瀏覽器"); } } return ajax; }
然后就是chenkcode中的js內(nèi)容了
//去掉兩邊的空格 function trim(str){ str=str.replace(/^\s*/,"");//從左側(cè)開(kāi)始,把空格去掉 str=str.replace(/\s*$/,""); //從右側(cè)開(kāi)始,把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); //設(shè)置ajax請(qǐng)求頭為post,它會(huì)將請(qǐng)求的漢字自動(dòng)進(jìn)行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=""; } }
然后開(kāi)始寫(xiě)服務(wù)器端的代碼,進(jìn)行校驗(yàn)的話就需要這樣的一個(gè)類了:
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; //驗(yàn)證碼檢查 public class CheckcodeAction extends ActionSupport{ private String checkcode; public void setCheckcode(String checkcode) { this.checkcode = checkcode; } /** * 驗(yàn)證 * @throws IOException */ public String check() throws IOException { //圖片路徑 String tip="images/a.jpg"; //從服務(wù)器獲取session中的驗(yàn)證碼 String checkcodeServer=(String) ActionContext.getContext().getSession().get("CHECKNUM"); if(checkcode.equals(checkcodeServer)){ tip="images/b.jpg"; } //以IO流的方式將tip變量輸出到ajax異步對(duì)象中 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文件中寫(xiě)入相應(yīng)的方法。
<struts> <package name="myPackage" extends="struts-default" namespace="/"> <action name="checkRequest" class="cn.tf.checkcode.CheckcodeAction" method="check"> </action> </package> </struts>
運(yùn)行結(jié)果如下:驗(yàn)證成功則返回綠色的小勾,錯(cuò)誤則紅色的叉。
以上是“Ajax+Struts2如何實(shí)現(xiàn)驗(yàn)證碼驗(yàn)證功能”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。