• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    Ajax+Struts2实现验证码验证功能实例代码

    众所周知,验证码在我们的生活中都是非常常见的,很多公司都在各种折腾各种各样的验证码,这里简要的用一个小案例来实现验证码的功能(ps:其实我挺讨厌验证码这个东西的)。

    今天分享的是通过ajax来动态的验证验证码输入是否正确。我们这里采用的是ajax+struts2来做的这个验证。 我们新建一个web工程。然后需要导入struts的相应包。之后我们需要写一个类来生成验证码。

    这里命名为01_image.jsp,这类的主要功能就是生成验证码,里面是各种画线条,随机数字等,我这里设置的是5个数字的验证,如果你想要改成其他的也可以,大致思路就是在生成数字的那个循环那里加上字母就可以了。

    %@ 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;i5;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;icheckNum.length();i++){
    sb.append(checkNum.charAt(i)+" ");//"2 5 2 5"
    }
    g.drawString(sb.toString(),15,20);
    session.setAttribute("CHECKNUM",checkNum);//2525
    //通过字节输出流输出
    ImageIO.write(image,"jpeg",response.getOutputStream());
    out.clear();
    out = pageContext.pushBody();
    %>

    接下来把输入验证码的html页面写好,我这里是些在了一个jsp文件中的。命名为checkcode.jsp

    th>验证码:/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>

    然后给这个文件添加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 name="myPackage" extends="struts-default" namespace="/"> 
    action 
    name="checkRequest" 
    class="cn.tf.checkcode.CheckcodeAction" 
    method="check">
    /action>
    /package>
    /struts>

    运行结果如下:验证成功则返回绿色的小勾,错误则红色的叉。

    以上所述是小编给大家介绍的Ajax+Struts2实现验证码验证功能实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

    您可能感兴趣的文章:
    • ajax+json+Struts2实现list传递实例讲解
    • struts2+jquery实现ajax登陆实例详解
    • 通过Ajax两种方式讲解Struts2接收数组表单的方法
    • ajax struts2 下拉框赋值(适合所有)
    • ajax交互Struts2的action(客户端/服务器端)
    • 使用struts2+Ajax+jquery验证用户名是否已被注册
    • Struts2和Ajax数据交互示例详解
    上一篇:关于ajax网络请求的封装实例
    下一篇:Ajax点击不断加载数据列表
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    Ajax+Struts2实现验证码验证功能实例代码 Ajax+Struts2,实现,验证,码,