Web开发 ： 生成验证码并利用Ajax检验是否正确

结果呈现

直接看图👇

差不多就是对验证码的一个检验，如果对的话就后面出现个小勾，错的话就红色叉叉这样

指点迷津（其实是废话/可直接跳过）

要写这个功能其实也是源自于金老师的课/为了增加demo的真实性，毕竟校验码也用的挺多的了，本身这种字符型的都快渐渐淘汰了，再做不好就没啥意义了orz

其次的话ajax这个东西实在是太陌生了，试试看增加一些情感交流

中间有遇到一些不该遇到的问题（当时还死活看不出来，影响了我的进食时间，不该）

接下来给大家理一下思路

第一步自然就是生成验证码，最简单的就是数字加字母，这边就选择的是最简单的，数字10个加上字母26*2个（大小写），完了随机生成就可以了。

然后需要把这个验证码呈现到网页上，用图片的形式保存和读取，没问题。

因为后期需要知道对错，要需要做的就是保存正确的验证码，这里用到了session，session存在于服务器的内存里，在访问某一个页面的时候给浏览器创建一个独一无二的号码，可以理解为session的id，在之后的验证过程中再把它取出来对比即可。

有了正确答案之后还要有浏览器输入的字符，通过jQuery选择器可以获取到，但是要和session中存的正确答案的话，还是选择servlet来做，而且按照逻辑关系来看也是在后台处理比较好，所以最终结论是用post方法给它提交到servlet里去，再把结果传回来之后加载对应的图片就可以了

实操部分（其实是贴代码部分）

第一个生成验证码，注释可能不详细但是言简意赅好吧

ResImgServlet

package response;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

/**
 * Servlet implementation class ResImgServlet
 */
@WebServlet("/ResImgServlet")
public class ResImgServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
//		response.setContentType("img/jpg");
		
		String s = "ABCDEFGHJKLMNPRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz";
		
		String scode = "";
		for(int i = 0; i < 4; i++) {
			scode += s.charAt(new Random().nextInt(s.length()));
		}
		
		HttpSession session = request.getSession();
		session.setAttribute("code", scode);
		
		// 在内存中创建一张图片
		BufferedImage img = new BufferedImage(70, 35, BufferedImage.TYPE_INT_RGB);

		Graphics g = img.getGraphics();

		// 设置背景
		g.setColor(new Color(255, 193, 7));;
		g.fillRect(0, 0, 70, 35);

		g.setColor(Color.BLACK);
		g.setFont(new Font(null, Font.BOLD, 24));
		g.drawString(scode, 5, 25);

		// 获取response输出流
		OutputStream os = response.getOutputStream();

		ImageIO.write(img, "jpg", os);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

html

因为上课的时候是放在注册功能中当例子的，所以这边代码就不贴了，有涉及到的部分都会给出

其中的required解释一下，本来这部分应该存在于表单中，required就表示必填选项，就是填了才可以提交表单这样（但是选择的处理方式在后期又改成了ajax，所以其实删掉也未尝不可

<label for="inputCode">校验码</label> 
<div>
	<input type="text" name="Usercode" id="ucode" placeholder="校验码" required="required">
	<div id="flagcode"></div>
	<img id="codeimg" alt="Code" src="ResImgServlet">
</div>		

CodeAjax

其实就是上面说的那个进行检验验证码的servlet

package Ajax;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import entity.User;
import jbdc.UserService;

/**
 * Servlet implementation class TranslateAjax
 */
@WebServlet("/CodeAjax")
public class CodeAjax extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.setContentType("UTF-8");
		
		String Usercode = request.getParameter("Usercode");
		
		HttpSession session = request.getSession();
		String code = (String) session.getAttribute("code");
		
//		System.out.println("Usercode:"+Usercode);
//		System.out.println("session code:"+code);
		
		String res = "";
		
		if(code.equals(Usercode)){	
//			session.removeAttribute("code");
			res="yes";
		}
		else {
			res = "no";
		}
		
		response.setContentType("UTF-8");
		
		PrintWriter out = response.getWriter();
		out.print(res);
		out.flush();
		out.close();
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

jQuery部分

就上面讲的，1把得到的用户输入的验证码传给CodeAjax，2对返回的结果进行反馈，具体形式就是后面的俩个小图片

这边用的方法是input失去焦点，值发生改变触发/如果想要那种值一改变就触发，或者说键盘一按下就触发的效果可以使用.on(‘input propertychange’, function() { })方法√

<script type="text/javascript">
	$(function(){
		$("input[name='Usercode']").change(function(){
			let Usercode = $("input[name='Usercode']").val();
			$.post("CodeAjax",{
				Usercode : Usercode,
			},function(res){
				if(res=="yes"){
					$("#flagcode").empty();
					$("#flagcode").append("<img src='img/yes.png'>");
				}
				else{
					$("#flagcode").empty();
					$("#flagcode").append("<img src='img/no.png'>");
				}
			})
		})
	})
</script>

ending（记得点赞）

有问题可以问 / 图标来源于阿里巴巴矢量库 / 还有就是要看全屏截图的话可以移步👉 Web开发 ：课程结果记录贴