【十万火急】我想用json在前台显示验证码是否正确信息（有点用的就给分）

jsp页面
-------------------------------------------------------------------------------------------------------------------------------------------
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'index.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script type="text/javascript" src="<%=path%>/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function () {
     $("#Verify").click(function(){
     $(this).attr("src","SecurityCodeImageAction?timestamp="+new Date().getTime());
});

});
</script>
  </head>

  <body>
      <form action="yanzheng" name="form" method="post">
                 验证码:<input type="text" id="id" name="name" value="" />
      <img src="SecurityCodeImageAction" id="Verify"  style="cursor:hand;"/><font color="red">看不清?单击验证码</font>
      <br/>
      <div id="notsuccess"></div>
      <input type="button" id="button" name="sbt" value="进入!" onclick="yan();"/>   ////////我先在yan();函数中添加一个方法可以提示我验证码输入是否正确/////////////////////
      </form>
  </body>
</html>
---------------------------------------------------------------------------------------------------------------------------------------------------------
java代码部分第一个  生成验证码
---------------------------------------------------------------------------------------------------------------------------------------------------------
package com.checkcode;
import java.util.Arrays;
  public class SecurityCode {


public enum SecurityCodeLevel {Simple,Medium,Hard};

    public static String getSecurityCode(){
         return getSecurityCode(4,SecurityCodeLevel.Hard,false);
    }


     public static String getSecurityCode(int length,SecurityCodeLevel level,boolean isCanRepeat){

        int len=length;

         char[] codes={'1','2','3','4','5','6','7','8','9',
                       'a','b','c','d','e','f','g','h','i','j','k','m','n','p','q','r','s','t','u','v','w','x','y','z',
                      'A','B','C','D','E','F','G','H','I','J','K','L','M','N','P','Q','R','S','T','U','V','W','X','Y','Z'};


        if(level==SecurityCodeLevel.Simple){
            codes=Arrays.copyOfRange(codes, 0,9);
       }else if(level==SecurityCodeLevel.Hard){
            codes=Arrays.copyOfRange(codes, 0,58);
        }


        int n=codes.length;


         if(len>n&&isCanRepeat==false){
            throw new RuntimeException(
                     String.format("调用SecurityCode.getSecurityCode(%1$s,%2$s,%3$s)出现异常，当isCanRepeat为%3$s时，传入参数%1$s不能大于%4$s",
                                    len,level,isCanRepeat,n));
         }

         char[] result=new char[len];

        if(isCanRepeat){
             for(int i=0;i<result.length;i++){

                int r=(int)(Math.random()*n);

                result[i]=codes[r];
             }
        }else{
            for(int i=0;i<result.length;i++){

                int r=(int)(Math.random()*n);


               result[i]=codes[r];


               codes[r]=codes[n-1];
              n--;
           }
        }

        return String.valueOf(result);
    }
}
---------------------------------------------------------------------------------------------------------------------------------------------------------
java代码部分第2个  验证判断部分
---------------------------------------------------------------------------------------------------------------------------------------------------------
package com.checkcode;

import java.io.ByteArrayInputStream;
import java.util.Map;

import org.apache.struts2.interceptor.SessionAware;

import com.checkcode.SecurityCode.SecurityCodeLevel;
import com.opensymphony.xwork2.ActionSupport;

public class SecurityCodeImageAction extends ActionSupport  implements SessionAware{

    private ByteArrayInputStream imageStream;

    private Map<String, Object> session ;
    private String name;
    private String msg;



    public String getMsg() {
return msg;
}

public void setMsg(String msg) {
this.msg = msg;
}

public Map<String, Object> getSession() {
return session;
}

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public ByteArrayInputStream getImageStream() {
        return imageStream;
    }

    public void setImageStream(ByteArrayInputStream imageStream) {
        this.imageStream = imageStream;
    }

    public void setSession(Map<String, Object> session) {
        this.session = session;
    }

    public String execute() throws Exception {

        String securityCode = SecurityCode.getSecurityCode();
        imageStream = SecurityImage.getImageAsInputStream(securityCode);

        session.put("securityCode", securityCode);

        return "right";
        }

    public String yanzheng(){
     if(session.get("securityCode").equals(name)){
          return SUCCESS;
         }else{
         msg="再看看！";
          return INPUT;    /////////////////////////////////////////////////////////////这里的msg我想用json调用显示的但是json出现错误没找到就放弃了   如果大家能够做到谢谢！！
    }
    }
}
----------------------------------------------------------------------------
java第三部分  生成验证码图片部分
----------------------------------------------------------------------------
   package com.checkcode;

   import java.awt.Color;
   import java.awt.Font;
   import java.awt.Graphics;
   import java.awt.image.BufferedImage;
   import java.io.ByteArrayInputStream;
   import java.io.ByteArrayOutputStream;
   import java.io.IOException;
   import java.util.Random;
   import com.sun.image.codec.jpeg.ImageFormatException;
   import com.sun.image.codec.jpeg.JPEGCodec;
   import com.sun.image.codec.jpeg.JPEGImageEncoder;

  /**
   * 工具类，生成验证码图片
   * @version 1.0 2012/08/21
   * @author dongliyang
   *
  */
      public class SecurityImage {

      /**
       * 生成验证码图片
     * @param securityCode   验证码字符
      * @return  BufferedImage  图片
      */
      public static BufferedImage createImage(String securityCode){

         //验证码长度
          int codeLength=securityCode.length();
        //字体大小
          int fSize = 15;
         int fWidth = fSize + 1;
          //图片宽度
          int width = codeLength * fWidth + 6 ;
         //图片高度
          int height = fSize * 2 + 1;

          //图片
          BufferedImage image=new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
          Graphics g=image.createGraphics();

          //设置背景色
          g.setColor(Color.WHITE);
          //填充背景
          g.fillRect(0, 0, width, height);

          //设置边框颜色
          g.setColor(Color.LIGHT_GRAY);
          //边框字体样式
          g.setFont(new Font("Arial", Font.BOLD, height - 2));
          //绘制边框
          g.drawRect(0, 0, width - 1, height -1);


          //绘制噪点
         Random rand = new Random();
        //设置噪点颜色
        g.setColor(Color.LIGHT_GRAY);
          for(int i = 0;i < codeLength * 6;i++){
             int x = rand.nextInt(width);
             int y = rand.nextInt(height);
            //绘制1*1大小的矩形
             g.drawRect(x, y, 1, 1);
          }

         //绘制验证码
          int codeY = height - 10;
         //设置字体颜色和样式
        g.setColor(new Color(19,148,246));
         g.setFont(new Font("Georgia", Font.BOLD, fSize));
        for(int i = 0; i < codeLength;i++){
             g.drawString(String.valueOf(securityCode.charAt(i)), i * 16 + 5, codeY);
          }
          //关闭资源
         g.dispose();

         return image;
     }

     /**
       * 返回验证码图片的流格式
      * @param securityCode  验证码
       * @return ByteArrayInputStream 图片流
      */
      public static ByteArrayInputStream getImageAsInputStream(String securityCode){

         BufferedImage image = createImage(securityCode);
         return convertImageToStream(image);
     }

     /**
      * 将BufferedImage转换成ByteArrayInputStream
       * @param image  图片
      * @return ByteArrayInputStream 流
      */
      private static ByteArrayInputStream convertImageToStream(BufferedImage image){

          ByteArrayInputStream inputStream = null;
         ByteArrayOutputStream bos = new ByteArrayOutputStream();
        JPEGImageEncoder jpeg = JPEGCodec.createJPEGEncoder(bos);
        try {
             jpeg.encode(image);
             byte[] bts = bos.toByteArray();
             inputStream = new ByteArrayInputStream(bts);
        } catch (ImageFormatException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
        return inputStream;
     }
}
在说一下问题  我想在验证码输入错误的时候用javascript进行alert提示
或者用json 的回调函数调用msg错误内容返回在页面上

8 个解决方案

#1

在线等谢谢大家！！！！！！！！

#2

貌似没用AJAX？

#3

下面是个实例别照抄只是借鉴一下就好
function check_login() {
         var code = $("#code").val();
         if(code == "") {
         $("#code_msg").text("请输入验证码.");
         return;
         }

         $.post(
         "login.do",
         $("#myform").serialize(),
         function(data) {
                                         //if里面是对调回的数据进行判断具体的判断条件你可以自己写这个是我以前项目用的你不用照抄
         if(data.flag==1) {
         //验证码错误这里是用ajax将验证码的输入项直接显示错误信息了你要想用alert 就把这个方法改一下就好
         $("#code_msg").text("验证码错误.");
         change();
         } else {
         //成功
         location.href = "toIndex.do";
         }
         }
         );
         }

#4

引用 3 楼 cmchina7 的回复:

下面是个实例别照抄只是借鉴一下就好
function check_login() {
         var code = $("#code").val();
         if(code == "") {
         $("#code_msg").text("请输入验证码.");
         return;
         }

         $.post(
         "login.do",
         $("#myform").serialize(),
         function(data) {
                                         //if里面是对调回的数据进行判断具体的判断条件你可以自己写这个是我以前项目用的你不用照抄
         if(data.flag==1) {
         //验证码错误这里是用ajax将验证码的输入项直接显示错误信息了你要想用alert 就把这个方法改一下就好
         $("#code_msg").text("验证码错误.");
         change();
         } else {
         //成功
         location.href = "toIndex.do";
         }
         }
         );
         }

-----------------------------------------------------------------------------------------------------------------------
十分感谢  可以在帮我看看我  我下面这段代码  哪里有错呢？？？  一直调用error的方法
就连alert（“请输入验证码”）都不显示
-----------------------------------------------------------------------------------------------------------------------
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'index.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script type="text/javascript" src="<%=path%>/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function () {
     $("#Verify").click(function(){
     $(this).attr("src","SecurityCodeImageAction?timestamp="+new Date().getTime());
});

});
$(document).ready(function(){
$("#button").click(function(){
var name= $('#id').attr('value');
if (name!=null||name!=""){
    $.ajax({
url:"yangzheng",
type:"post",
dataType:"json",
success:function(data){
if(data.msg!=null){
$("#notsuccess").html(" <br>");
            var html ="成功了" ;
            $('#notsuccess').html(html);
}else{
  $("#notsuccess").html(data.msg);
              $("#notsuccess").css("color","red");
}
},
error:function(){
alert("出现错误");
}
});
}else{
alert("请填写验证码");}
});
});
</script>
  </head>

  <body>
      <form id="ids" action="yanzheng" name="form" method="post">
                 验证码:<input type="text" id="id" name="name" value="" />
      <img src="SecurityCodeImageAction" id="Verify"  style="cursor:hand;"/><font color="red">看不清?单击验证码</font>
      <br/>
      <div id="notsuccess"></div>
      <input type="button" id="button" name="sbt" value="进入!"/>
      </form>
  </body>
</html>

#5

等大神吧我前端的东西很废的

#6

我可以说我也不懂吗？

#7



//有必要写这么麻烦吗？

var name= $('#id').attr('value');

直接

var name = $("#id").val();

不就行了

并且id是关键字啊换个id名称

url:"yangzheng",

这个url确定是这样？

#8

并且像这种js错误
直接用调试工具跟踪
firebug或者ie8以及以上都会有js调试工具,直接就能定位哪行的错误

#1