ajax怎么实现验证码
这次给大家带来ajax怎么实现验证码,ajax实现验证码的注意事项有哪些,下面就是实战案例,一起来看一下。
本文实例为大家分享了ajax实现验证码功能的具体代码,供大家参考,具体内容如下
首先创建一个验证码:
<%@ page contentType="image/jpeg; charset=utf-8" language="java" import="java.util.*,java.awt.*,java.awt.image.*,javax.imageio.*" pageEncoding="UTF-8"%> <!-- 以上导入awt和awt.image包 --> <%! //获取随机颜色 public Color getColor(){ Random random = new Random(); //使用rgb()随机产生颜色 int r = random.nextInt(256); int g = random.nextInt(256); int b = random.nextInt(256); return new Color(r,g,b); } //获取随机数字 产生一个4位数 public String getNum(){ String str = ""; Random random = new Random(); for(int i = 0;i < 4;i++){ str += random.nextInt(10); //0-9 } 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 < 30;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, x1, y1); } //字的颜色和数字 g.setFont(new Font("Microsoft YaHei",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(), 15, 20); //存入session域中 session.setAttribute("CHECKNUM", checkNum); //例如1010 //将图像以jpeg的形式通过字节流输出 ImageIO.write(image, "jpeg", response.getOutputStream()); //清除缓存 out.clear(); //放入body中 out = pageContext.pushBody(); %>
将验证码压缩成图片,在checkcode.jsp中引用,并在该页面中利用ajax向服务器发送数据
<%@ 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%>" rel="external nofollow" > <title>验证码</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"> <style type="text/css"> table{ margin: 100px auto; } </style> </head> <body> <table border="0" align="center"> <tr> <td>验证码</td> <td><input type="text" name="checkcode" id="checkcodeID" maxlength="4" size="4"></td> <td><img alt="加载失败" src="image.jsp"></td> <td id="show">√√√</td> </tr> </table> </body> <script type="text/javascript"> //去除空格 function trim(str){ //从左侧开始替换空格 str = str.replace(/^\s*/,""); //从左侧开始替换空格 str = str.replace(/\s$/,""); return str; } </script> <script type="text/javascript"> //创建ajax对象 function createAjax(){ var ajax = null; try{ ajax = new ActiveXObject("microsoft.xmlhttp"); }catch(e){ try{ ajax = new XMLHttpRequest(); }catch(e1){ alert("请更换浏览器"); } } return ajax; } </script> <script type="text/javascript"> document.getElementById("checkcodeID").onkeyup = function(){ var checkcode = this.value; //去除空格 checkcode = trim(checkcode); if(checkcode.length == 4){ //获取ajax对象 var ajax = createAjax(); //获取去空格的内容 var method = "POST"; var url = "${pageContext.request.contextPath}/CheckcodeServlet?time="+new Date().getTime(); //准备发送异步请求 ajax.open(method, url); //设置请求头POST提交方式才需要 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; //获取图片路径 然后进行放入td中 var img = document.createElement("img"); img.src = tip; img.style.width = "14px"; img.style.height = "14px"; var td = document.getElementById("show"); td.innerHTML = ""; td.appendChild(img); } } } } } </script> </html>
然后编写服务端,接收输入的信息,判断是否与验证码相互匹配,将对应的图片的路径以输出流的方式输出
public class CheckcodeServlet extends HttpServlet { @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("utf-8"); resp.setContentType("text/html;charset=utf-8"); //图片路径 String tip = "images/MsgError.gif"; String checkcode = req.getParameter("checkcode"); //测试 System.out.println(checkcode); //获取session域中的数字 String checkcodeService = (String) req.getSession().getAttribute("CHECKNUM"); //判断 if (checkcode.equals(checkcodeService)) { tip = "images/MsgSent.gif"; } //输出路径 PrintWriter pw = resp.getWriter(); pw.write(tip); pw.flush(); pw.close(); } }
当输入第4个数字的时候就会出现提示
运行结果:
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是ajax怎么实现验证码的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

我们通常接收到政府或其他机构发送的PDF文件,有些文件带有数字签名。验证签名后,我们会看到SignatureValid消息和一个绿色勾号。如果签名未验证,会显示有效性未知。验证签名很重要,下面看看如何在PDF中进行验证。如何在PDF中验证签名验证PDF格式的签名使其更可信,文档更容易被接受。您可以通过以下方式验证PDF文档中的签名。在AdobeReader中打开PDF右键单击签名,然后选择显示签名属性单击显示签名者证书按钮从“信任”选项卡将签名添加到“受信任的证书”列表中单击验证签名以完成验证让

1、打开微信进入后,点击搜索图标,输入微信团队,点击下方的服务进入。2、进入后,点击左下方的自助工具的选项。3、点击后,在上方的选项内,点击解封/申诉辅助验证的选项。

标题:解决jQueryAJAX请求出现403错误的方法及代码示例403错误是指服务器禁止访问资源的请求,通常会导致出现这个错误的原因是请求缺少权限或者被服务器拒绝。在进行jQueryAJAX请求时,有时候会遇到这种情况,本文将介绍如何解决这个问题,并提供代码示例。解决方法:检查权限:首先要确保请求的URL地址是正确的,同时验证是否有足够的权限来访问该资

PHP8是PHP的最新版本,为程序员带来了更多的便利和功能。这个版本特别关注安全性和性能,其中一个值得注意的新特性是增加了验证和签名功能。在本文中,我们将深入了解这些新的功能及其用途。验证和签名是计算机科学中非常重要的安全概念。它们通常用于确保传输的数据是完整和真实的。在处理在线交易和敏感信息时,验证和签名变得尤为重要,因为如果有人能够篡改数据,可能会对

jQuery是一个流行的JavaScript库,用于简化客户端端的开发。而AJAX则是在不重新加载整个网页的情况下,通过发送异步请求和与服务器交互的技术。然而在使用jQuery进行AJAX请求时,有时会遇到403错误。403错误通常是服务器禁止访问的错误,可能是由于安全策略或权限问题导致的。在本文中,我们将讨论如何解决jQueryAJAX请求遭遇403错误

使用Ajax从PHP方法中获取变量是Web开发中常见的场景,通过Ajax可以实现页面无需刷新即可动态获取数据。在本文中,将介绍如何使用Ajax从PHP方法中获取变量,并提供具体的代码示例。首先,我们需要编写一个PHP文件来处理Ajax请求,并返回所需的变量。下面是一个简单的PHP文件getData.php的示例代码:

steam是一款游戏爱好者都在使用的平台,这里能够领取购买很多的游戏,而近期有很多用户在登录Steam的时候出现了卡在手机令牌验证的界面,无法登录成功,面对这种情况,大多数用户都是不知道怎么解决的,没有关系,今日软件教程就来为广大用户们进行解答,有需要的朋友可到查看操作方法。 steam手机令牌报错? 解决办法一:软件问题 首先在手机上找到steam软件设置,请求协助页面,并确认使用该设备网络运行正常,再次单击确定,点击发送短信,即可在手机页面收取到验证码,即可完成验证,解决处理请求时

耐克作为全球知名的运动品牌,其鞋子备受瞩目。然而,市场上也存在大量的假冒伪劣商品,其中就包括假冒的耐克鞋盒。辨别真假鞋盒对于保护消费者的权益至关重要。本文将为您提供一些简单而有效的方法,以帮助您辨别真假鞋盒。一:外包装标题通过观察耐克鞋盒的外包装,可以发现许多细微的差异。真正的耐克鞋盒通常具有高品质的纸质材料,手感光滑,且没有明显的刺激性气味。正品鞋盒上的字体和标志通常清晰、精细,并且没有模糊或颜色不协调的情况。二:LOGO烫金标题耐克鞋盒上的LOGO通常是烫金工艺,真品鞋盒上的烫金部分会呈现出
