JavaWeb Jquery Ajax实现验证码局部刷新和校验

最新推荐文章于 2024-08-01 15:05:06 发布

kamisama。。

最新推荐文章于 2024-08-01 15:05:06 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/weixin_44763323/article/details/104217214

版权

笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一：设置JSP页面

（1）：给form表单中的 “登录” 按钮设置onsubmit验证点击后调用checkCode（）返回结果为true页面跳转，为false页面不跳转。
（2）：通过标签设置当点击“看不清？”时调用flushImage();进行验局部证码刷新。
（3）：点击注册按钮转发到"register.jsp"页面。

<body>
<form action="login.do" method="post" onsubmit="return checkCode()">
	 <h1>登录页面</h1>
	 		用户名：<input type="text" name="username">
	 		</br></br>
  			
  			密码：<input type="password" name="password">
  			</br></br>
  			
  			验证码：<input type="text" id="txt_code" name="code" size="5">
  					<img alt="验证码" id="code" src="image.do">
  					<a href="javascript:flushInamge();">看不清？</a>
  					<span id="s_code"></span>
  					</br></br>
  					
	  		<input type="submit" value="登录">
	  		<a href="register.jsp"><input type="button" value="注册"></a>
</form>

二：制作验证码

（1）制作java验证码并把产生的验证码字符串存储在
（2）request.getSession().setAttribute(“code”, str);存储在session中。
（3）利用ImageIO.write(image, “png”, out);把图片返回给ajax的回调函数。

else if("/image.do".equals(path)) {//生成验证码
			//避免浏览器缓存
			response.addHeader("Pragma", "No-cache");
			response.setHeader("Cache-Control",	"no-cache");
			response.setDateHeader("Expires", 0);
			//1.动态的创建一个图片
			//第一个参数高度  第二个参数高度	第三个参数图片类型RGB
			BufferedImage image = new BufferedImage(100, 30, BufferedImage.TYPE_INT_RGB);
			//2.在图片上画字符
			Graphics graphics = image.getGraphics();
			graphics.setColor(Color.white);//改变图片背景色默认黑色
			graphics.fillRect(0, 0, 100, 30);//画矩形
			String str = "";
			Random rand = new Random();
			Font font = new Font(null,Font.BOLD,20);
			for (int i = 0; i < 5; i++) {
					int index = rand.nextInt(chars.length);
					Color color = new Color(rand.nextInt(255),rand.nextInt(255),rand.nextInt(255));				//生成一个随机颜色字符
					graphics.setColor(color);
					graphics.setFont(font);
					graphics.drawString(chars[index]+"", 30+i*10, 20);
					str+=chars[index];
			}
			for (int i = 0; i < 4; i++) {
				Color color = new Color(rand.nextInt(255),rand.nextInt(255),rand.nextInt(255));
				graphics.setColor(color);
				graphics.drawLine(rand.nextInt(100), rand.nextInt(30), rand.nextInt(100), rand.nextInt(30));
			}
			//3.将图片上的文字保存到session中
			request.getSession().setAttribute("code", str);
			//将图片利用response输出
			OutputStream out = response.getOutputStream();
			ImageIO.write(image, "png", out);
			
		}

三：创建jquery ajax请求通过Java进行校验

（1）：flushImamge()；通过选择器选择名字为“code”的对象，发送image.do请求调用Java程序对‘“code”对象进行刷新。

（2）：checkCode();通过选择器选择id为“txt_code”的对象获取参数，然后发送checeked.do请求调用Java程序进行校验，如果验证码正确活动的data为 ‘验证码正确’ 返回true，为空或者是 “验证码错误” 就是false。

function flushInamge(){
	$("#code").attr("src","image.do?r"+Math.random());//实现局部刷新
	
}

function checkCode(){
	var check = true;
	//获取用户输入的验证码信息
	var code = $("#txt_code").val().trim();
	if(code == ''){
		$("#s_code").html("验证码不能为空");
		return false;
	}

	//验证码不为空就进行校验
	$.ajax({
		url:"checked.do",
		type:"post",
		async:false,
		data:{"code":code},
		dataType:"text",
		success:function(data){//data是服务器返回的消息
			$("#s_code").html(data);
			if(data == '验证码错误'){check = false;}
		}
	})
	return check;
}

</script>

四：用Java对验证码进行校验

通过request.getParameter(“code”);获取ajax请求传递的参数，然后通过request.getSession().getAttribute(“code”);获取session作用域中设置的参数，
最后通过if(code.equalsIgnoreCase(scode))无视大小写对输入的验证码和生成的验证码进行匹配相同out.print(“验证码正确”)，不相同out.print(“验证码错误”);将参数返回给ajax。

else if("/checked.do".equals(path)) {
			//接收请求code参数
			String code = request.getParameter("code");
			System.out.println("code"+code);
			//获取session中验证码信息
			String scode = (String) request.getSession().getAttribute("code");
			System.out.println("scode"+scode);
			//比对输出
			response.setContentType("text/html;charset=UTF-8");
			PrintWriter out = response.getWriter();
			if(code.equalsIgnoreCase(scode)) {
				System.out.println(true);
				out.print("验证码正确");
			}else {
				out.print("验证码错误");
				System.out.println(false);
			}
			out.close();
 		}

效果

在这里插入图片描述

kamisama。。

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
JavaWeb Jquery Ajax实现验证码局部刷新和校验

一：设置JSP页面（1）：给form表单中的 “登录” 按钮设置onsubmit验证点击后调用checkCode（）返回结果为true页面跳转，为false页面不跳转。（2）：通过标签设置当点击“看不清？”时调用flushImage();进行验局部证码刷新。（3）：点击注册按钮转发到"register.jsp"页面。<body><form action="login....
复制链接

扫一扫