分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置：首页 > 软件开发

AJAX(二)-实现验证码异步验证功能

发布时间：2023-09-06 01:42责任编辑：胡小海关键词：验证码
???????????????????????????
???????????????????????案例实现效果

用户在前端输入验证码，按键收起触发异步验证，验证验证码的对错

前端代码

checkcode.jsp

[java] view plain copy
print?
  1. <%--
  2. User:cxspace
  3. Time:下午7:45
  4. --%>
  6. <html>
  7. <title>验证码检查</title>
  9. </head>
  10. <form>
  12. <th>验证码:</th>
  14. <td><imgsrc="check/checkImage.jsp"/></td>
  15. </table>
  19. functiontrim(str){
  20. str=str.replace(/^\s*/,"");//换掉左边空格
  22. returnstr;
  26. document.getElementById("checkcodeID").onkeyup=function(){
  27. varcheckcode=this.value;
  29. varajax=createAJAX();
  31. varurl="${pageContext.request.contextPath}/checkRequest?time="+newDate().getTime();
  32. ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
  33. if(ajax.readyState==4){
  34. vartip=ajax.responseText;
  36. img.src=tip;
  38. img.style.height="14px";
  40. td.innerHTML="";
  41. }
  42. }
  45. td.innerHTML="";
  46. }
  48. </html>
<%-- ?Created by IntelliJ IDEA. ?User: cxspace ?Date: 16-8-18 ?Time: 下午7:45 ?To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> ???<title>验证码检查</title> ???<script type="text/javascript" src="js/ajax.js"></script></head><body> ??<form> ??????<table border="0" align="center"> ??????????<th>验证码:</th> ??????????<td><input size="3" type="text" name="checkcode"  maxlength="4"/></td> ??????????<td><img src="check/checkImage.jsp" /></td> ??????????<td ></td> ??????</table> ??</form> ??<script type="text/javascript"> ??????//去掉两边空格 ??????function trim(str) { ??????????//正则表达式去掉左边空格 ??????????str = str.replace(/^\s*/,""); //换掉左边空格 ??????????str = str.replace(/\s*$/,""); ?//换掉右边空格 ??????????return str; ??????} ??</script> ??<script type="text/javascript"> ??????document.getElementById("checkcodeID").onkeyup = function () { ??????????var checkcode = this.value; ??????????var checkcode = trim(checkcode); ??????????if (checkcode.length == 4){ ??????????????var ajax = createAJAX(); ??????????????var method = "POST"; ??????????????var url = "${pageContext.request.contextPath}/checkRequest?time="+new Date().getTime(); ??????????????ajax.open(method,url); ??????????????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("res"); ??????????????????????????td.innerHTML=""; ??????????????????????????td.appendChild(img) ??????????????????????} ??????????????????} ??????????????} ??????????}else { ??????????????var td = document.getElementById("res"); ??????????????td.innerHTML = ""; ??????????} ??????} ??</script></body></html>

ajax.jsp

[java] view plain copy
print?
  1. //创建AJAX异步对象，即XMLHttpRequest
  2. varajax=null;
  3. ajax=newActiveXObject("microsoft.xmlhttp");
  4. try{
  5. }catch(e2){
  7. }
  8. returnajax;
  9. //创建AJAX异步对象，即XMLHttpRequestfunction createAJAX(){ ???var ajax = null; ???try{ ???????ajax = new ActiveXObject("microsoft.xmlhttp"); ???}catch(e1){ ???????try{ ???????????ajax = new XMLHttpRequest(); ???????}catch(e2){ ???????????alert("你的浏览器不支持ajax，请更换浏览器"); ???????} ???} ???return ajax;}

checkImage.jsp

[java] view plain copy
print?
  1. <%--
  2. User:cxspace
  3. Time:下午5:39
  4. --%>
  6. <%@pagecontentType="image/jpeg"import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*"%>
  8. publicColorgetColor(){
  9. Randomrandom=newRandom();
  10. intr=random.nextInt(256);
  11. intg=random.nextInt(256);
  12. intb=random.nextInt(256);
  13. Colorcolor=newColor(r,g,b);
  14. returncolor;
  16. publicStringgetNum(){
  17. Stringstr="";
  18. Randomrandom=newRandom();
  19. for(inti=0;i<4;i++){
  20. }
  21. returnstr;
  22. %>
  23. <%
  24. response.setHeader("pragma","mo-cache");
  26. response.setDateHeader("expires",0);
  27. //设置图片大小和背景
  28. //创建画笔对象
  29. g.setColor(newColor(200,200,200));
  31. Randomrandom=newRandom();
  32. intx=random.nextInt(80);
  33. intx1=random.nextInt(x+10);
  35. g.setColor(getColor());
  36. }
  37. g.setFont(newFont("serif",Font.BOLD,16));
  38. StringcheckNum=getNum();
  39. //给字符串字符之间加空格
  40. for(inti=0;i<checkNum.length();i++){
  42. }
  47. out.clear();
  48. %>
<%-- ?Created by IntelliJ IDEA. ?User: cxspace ?Date: 16-8-18 ?Time: 下午5:39 ?To change this template use File | Settings | File Templates.--%><%@ 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); ???????int g = random.nextInt(256); ???????int b = random.nextInt(256); ???????Color color = new Color(r,g,b); ???????return color; ???} ???//获取四位随机数连成的字符串 ???public String getNum(){ ???????String str = ""; ???????Random random = new Random(); ???????for(int i = 0 ; i < 4 ; i++){ ???????????str += random.nextInt(10); ???????} ???????return ?str; ???}%><% ???//设置浏览器不缓存图片 ???response.setHeader("pragma","mo-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 < 20 ; i++){ ???????Random random = new Random(); ???????int x = random.nextInt(80); ???????int y = random.nextInt(30); ???????int x1 = random.nextInt(x+10); ???????int y1 = random.nextInt(y+10); ???????//背景模糊线使用随机色 ???????g.setColor(getColor()); ???????g.drawLine(x,y,x+x1,y+y1); ???} ???g.setFont(new Font("serif",Font.BOLD,16)); ???g.setColor(Color.black); ???String checkNum = getNum(); ???//给字符串字符之间加空格 ???StringBuffer sb = new StringBuffer(); ???for (int i = 0 ; i < checkNum.length() ; i ++){ ???????sb.append(checkNum.charAt(i)+" "); ???} ???g.drawString(sb.toString(),10,20); ???session.setAttribute("checkNum",checkNum); ???ImageIO.write(image,"jpeg",response.getOutputStream()); ???out.clear(); ???out = pageContext.pushBody();%>

后端代码

action配置

[java] view plain copy
print?
  1. <?xmlversion="1.0"encoding="UTF-8"?>
  2. <!DOCTYPEstrutsPUBLIC
  4. "http://struts.apache.org/dtds/struts-2.3.dtd">
  5. <struts>
  14. <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE struts PUBLIC ???????"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" ???????"http://struts.apache.org/dtds/struts-2.3.dtd"><struts> ??<package name="myPackage" namespace="/" extends="struts-default"> ?????<action name="checkRequest" ????????????? ?????????????method="check"> ?????</action> ??</package></struts>

checkcode.CheckcodeAction

[java] view plain copy
print?
  1. packagecheckcode;
  2. importcom.opensymphony.xwork2.ActionContext;
  3. importorg.apache.struts2.ServletActionContext;
  4. importjavax.servlet.http.HttpServletResponse;
  6. *Createdbycxspaceon16-8-18.
  7. publicclassCheckcodeActionextendsActionSupport{
  8. privateStringcheckcode;
  9. publicvoidsetCheckcode(Stringcheckcode){
  10. }
  11. publicStringcheck()throwsException{
  12. Stringtip="images/MsgError.gif";
  13. StringcheckcodeServer=(String)ActionContext.getContext().getSession().get("checkNum");
  14. if(checkcode.equals(checkcodeServer)){
  16. }
  17. HttpServletResponseresponse=ServletActionContext.getResponse();
  18. response.setContentType("text/html;charset=UTF-8");
  19. pw.write(tip);
  20. pw.close();
  21. returnnull;
  22. }
package checkcode;import com.opensymphony.xwork2.ActionContext;import com.opensymphony.xwork2.ActionSupport;import org.apache.struts2.ServletActionContext;import javax.servlet.http.HttpServletResponse;import java.io.PrintWriter;/** * Created by cxspace on 16-8-18. */public class CheckcodeAction extends ActionSupport{ ???private String checkcode; ???public void setCheckcode(String checkcode) { ???????this.checkcode = checkcode; ???} ???public String check() throws Exception { ???????String tip = "images/MsgError.gif"; ???????String checkcodeServer = (String) ActionContext.getContext().getSession().get("checkNum"); ???????if (checkcode.equals(checkcodeServer)){ ???????????tip="images/MsgSent.gif"; ???????} ???????HttpServletResponse response = ServletActionContext.getResponse(); ???????response.setContentType("text/html;charset=UTF-8"); ???????PrintWriter pw = response.getWriter(); ???????pw.write(tip); ???????pw.flush(); ???????pw.close(); ???????return null; ???}}

　　

　　

　　

???????????????
???????????????????

AJAX(二)-实现验证码异步验证功能

原文地址：https://www.cnblogs.com/jpfss/p/8446369.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved