前台显示页面:
welcome.jsp
<%@ page language="java" contentType="text/html; utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>修改个人信息</title> <script> function createXMLHttpRequest() { //表示当前浏览器不是ie,如ns,firefox if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } function validate(field) { var div=document.getElementById("divbid"); // var reg=/[^A-Za-z0-9_]{7,10}/g; if (field.value.length != 0) { //创建XMLHttpRequest createXMLHttpRequest(); var url = "codevalidate.jsp?authcode=" + field.value + "×tamp=" + new Date().getTime();//加时间戳防止缓存重复 xmlHttp.open("GET", url, true); //方法地址,处理完成后自动调用,回调 xmlHttp.onreadystatechange=function() { //匿名函数 if(xmlHttp.readyState == 4) { //Ajax引擎初始化成功 if (xmlHttp.status == 200) { //http协议成功 document.getElementById("divbid").innerHTML =xmlHttp.responseText; }else { alert("请求失败,错误码=" + xmlHttp.status); } } }; //将参数发送到Ajax引擎 xmlHttp.send(null); }else { div.innerHTML="<div class=\"wrong\">验证码不能为空</div>" } } function reloadImage(imgurl){ var getimagecode=document.getElementById("codeimg"); getimagecode.src= imgurl + "?id=" + Math.random(); var code=<%=session.getAttribute("code")%>; alert(code) } </script> </head> <body> <form action="authcode.jsp" method="post" name="loginform"> 输入验证码:<input type="text" name="authcode" id="authcode" maxlength="4" size="10" onblur="validate(this)" ><span id="divbid"></span> <img id="codeimg" name="codeimg" border=0 src="authcode.jsp"> <a href="javascript:reloadImage('authcode.jsp')">看不清</a><br/> </form> <script language="javascript" type="text/javascript"> function reloadImage(imgurl){ var getimagecode=document.getElementById("codeimg"); getimagecode.src= imgurl + "?id=" + Math.random(); var code=<%=session.getAttribute("code")%>; alert(code) } </script> </body> </html>
产生图片页面
authcode.jsp
<%@ page contentType="image/JPEG" import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" pageEncoding="GBK"%> <%!Color getRandColor(int fc, int bc) {//给定范围获得随机颜色 Random random = new Random(); if (fc > 255) fc = 255; if (bc > 255) bc = 255; int r = fc + random.nextInt(bc - fc); int g = fc + random.nextInt(bc - fc); int b = fc + random.nextInt(bc - fc); return new Color(r, g, b); }%> <% //设置页面不缓存 response.setHeader("Pragma", "No-cache"); response.setHeader("Cache-Control", "no-cache"); response.setDateHeader("Expires", 0); // 在内存中创建图象 int width = 60, height = 20; BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); // 获取图形上下文 Graphics g = image.getGraphics(); //生成随机类 Random random = new Random(); // 设定背景色 g.setColor(getRandColor(200, 250)); g.fillRect(0, 0, width, height); //设定字体 g.setFont(new Font("Times New Roman", Font.PLAIN, 18)); //画边框 //g.setColor(new Color()); //g.drawRect(0,0,width-1,height-1); // 随机产生155条干扰线,使图象中的认证码不易被其它程序探测到 g.setColor(getRandColor(160, 200)); for (int i = 0; i < 100; i++) { int x = random.nextInt(width); int y = random.nextInt(height); int xl = random.nextInt(12); int yl = random.nextInt(12); g.drawLine(x, y, x + xl, y + yl); } // 取随机产生的认证码(4位数字) String sRand = ""; for (int i = 0; i < 4; i++) { String rand = String.valueOf(random.nextInt(10)); sRand += rand; // 将认证码显示到图象中 g.setColor(new Color(20 + random.nextInt(110), 20 + random .nextInt(110), 20 + random.nextInt(110)));//调用函数出来的颜色相同,可能是因为种子太接近,所以只能直接生成 g.drawString(rand, 13 * i + 6, 16); System.out.println(rand); } // 将认证码存入SESSION session.setAttribute("code", sRand); // 图象生效 g.dispose(); // 输出图象到页面 ImageIO.write(image, "JPEG", response.getOutputStream()); %>
ajax动态验证页面
codevalidate.jsp
<%@ page language="java" import="java.util.*,java.util.*,java.text.*,com.neusoft.xkxt.dao.*,com.neusoft.xkxt.bean.*,com.neusoft.xkxt.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <% String authcode=request.getParameter("authcode"); String code=(String)session.getAttribute("code"); if(authcode.equals(code)){ out.println("<div class='right'>√</div>");} else{ out.println("<div class='wrong'>验证码不正确</div>");} %>
相关推荐
### jsp+ajax实现的局部刷新验证验证码(onblur事件触发验证) #### 技术背景与概念 在Web应用开发中,验证码(CAPTCHA)是一种常用的安全措施,用于区分用户是人类还是自动化软件。传统的表单提交方式在提交数据时...
标题和描述中提到的“jsp+ajax实现的局部刷新较验验证码(onblur事件触发较验)”技术涉及的知识点主要包括了JSP页面技术、AJAX无刷新数据交互技术、以及验证码图片的生成和验证方法。下面将对这些知识点进行详细说明...
`JSP+Ajax`的组合可以帮助我们实现这样的功能,特别是在验证用户输入方面。本文将详细介绍如何使用`JSP`和`Ajax`来实现在用户离开文本框时无刷新地验证用户名是否可用。 首先,我们需要创建一个输入页面,例如`...
jsp+ajax 发送 GET 请求的方法 本文主要介绍了 jsp+ajax 发送 GET 请求的方法,包含了 Ajax 数据的发送与 JSP 文件的处理技巧。下面是详细的知识点: 一、Ajax 发送 GET 请求 Ajax 发送 GET 请求是通过创建 ...
通过对上述内容的理解,我们可以看出,使用JSP和Ajax相结合的方法,能够有效地提高Web应用的用户体验,特别是在需要实时数据校验和页面局部刷新的场景中,这种方法显得尤为高效。希望本文的实例能够帮助开发者在类似...
在身份证号的输入框中,通过`onblur`事件触发`check`函数,当失去焦点时自动验证身份证号。 ```html <input type="text" name="trainUser.cardNo" onblur="check()" /> ``` 2. **JavaScript验证** 使用...
1. **事件监听**:监听表单元素的`onkeyup`、`onblur`等事件,触发验证请求。 2. **XMLHttpRequest对象**:创建一个新的XMLHttpRequest对象,用于与服务器通信。 3. **发送请求**:调用`open()`方法设置请求类型...
本篇文章将深入探讨如何使用AJAX实现局部刷新一个包含JSP内容的div元素。 首先,AJAX(Asynchronous JavaScript and XML)是一种在不重新加载整个网页的情况下,与服务器交换数据并更新部分网页的技术。在上述示例...
Ajax的核心是JavaScript对象XMLHttpRequest,通过这个对象,前端可以向服务器发送请求,获取响应,并在后台处理这些数据,更新部分DOM元素,从而实现页面局部刷新。在这个例子中,用户注册时输入用户名,Ajax负责在...
在本文中,我们将探讨如何使用PHP和Ajax技术实现一个简单的唯一性校验功能,特别是针对用户名的可用性检查。这个功能对于任何用户注册系统都至关重要,因为它能确保新注册的用户名是唯一的,避免冲突。 首先,我们...
每个输入字段都有一个`onblur`事件监听器,当用户离开输入框时触发验证函数。 ```html 用户名: <td><input type="text" name="name" id="username" onblur="verifyName()" /> 密码: <td><input type...
当用户在文本框1中输入内容并离开焦点(blur事件)时,会触发一个AJAX请求。这里有两种实现方式: 1. 第一种方案是在文本框1上添加onblur事件,调用函数sys()。sys()函数使用$.post()发送POST请求到"test1.ashx",...
1. **前端交互**:当用户在输入框中输入用户名时,可以设置监听事件(如`onkeyup`或`onblur`),触发Ajax请求。 2. **构建请求**:在事件处理器内,创建XMLHttpRequest对象,然后调用`open()`方法,传入请求类型...
2. **Ajax**(异步JavaScript和XML)允许我们在不刷新整个页面的情况下向服务器发送请求并接收响应。在注册表单中,当用户输入用户名并失去焦点时,触发Ajax请求,前端JavaScript将发送到后端PHP脚本进行验证。 3. ...
总结来说,"php+ajax实时验证"是一个通过结合PHP和AJAX技术提升用户体验的典型应用。它减少了用户因提交无效数据而导致的额外操作,提高了表单填写的效率和准确性。实现的关键在于利用JavaScript事件监听用户输入,...
- `onBlur="CheckUserName()"`:当文本框失去焦点时触发`CheckUserName`函数。 3. **JavaScript函数实现**: - `CheckUserName()`:此函数首先获取用户输入的用户名,然后使用`XMLHttpRequest`对象向服务器端发送...
在IT行业中,Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页内容的技术。这种技术极大地提升了用户体验,因为它允许用户在不中断当前操作的情况下与服务器进行数据...
2. 配置AJAX事件,监听文本框的onChange或onBlur事件,触发AJAX调用。这通常涉及编写JavaScript函数,设置HTTP请求的URL、方法(GET或POST)、参数(输入的用户名)等。 3. 在服务器端,创建一个处理AJAX请求的ASP...