- 浏览: 1068272 次
- 性别:
- 来自: 长沙
文章分类
- 全部博客 (639)
- 服务器配置篇 (58)
- hibernate篇 (14)
- spring篇 (33)
- struts篇 (28)
- JS篇 (46)
- 其他技术篇 (46)
- 数据库集群配置 (6)
- JAVA基础相关 (48)
- 分布式框架HadHoop的应用 (2)
- FLEX篇 (8)
- SQLSERVER技术 (32)
- Android学习 (13)
- amchart学习笔记 (1)
- openfire+smark搭建即时通讯 (9)
- Linux学习 (18)
- Oracle数据库 (15)
- 网站优化技术 (12)
- mysql数据库 (2)
- 项目学习总结 (18)
- 工具类(JAVA) (12)
- 工具类(JS) (2)
- 设计模式 (10)
- Lucene学习 (24)
- EJB3学习 (6)
- Sphinx搜索引擎 (3)
- 工作中用到的软件小工具 (5)
- .NET (49)
- JAVA 连接SQLSERVER2008步骤 (1)
- MongoDB (19)
- Android手机开发 (3)
- Maven (6)
- vue (9)
- Shiro (4)
- mybatis (3)
- netty框架 (1)
- SpringCloud (3)
- spring-cloud (7)
- Git (1)
- dubbo (2)
- springboot (13)
- rocketmq (1)
- git学习 (2)
- kafka服务器 (2)
- linux (10)
- WEB系统辅助项目 (1)
- jenkins (2)
- docker (4)
- influxdb (3)
- python (2)
- nginx (1)
最新评论
-
jiangfuofu555:
这样数据量大,效率怎么样?
sqlserver 实现分页的前台代码 以及后台的sqlserver语句 -
w156445045:
博主请问下,如何做到实时的刷新呢,
另外我后台是Java 谢谢 ...
web 版本的汽车仪表盘,非常好看。还有各种图形 -
jackyin5918:
<transportConnector name=&qu ...
ActiveMQ的activemq.xml详细配置讲解 -
握着橄榄枝的人:
你这个不是spring1.x的吧
spring1.x使用AOP实例 -
xiaophai:
全乱套了!
openfire+spark搭建完美的及时通讯
1.首先下载Ajax Fancy Capcha的所有JS,CSS,以及图片文件
2.写JSP页面
<%@ page language="java" pageEncoding="gbk"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>upload index</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script type="text/javascript"
src="/JQueryUpload/js/jquery.js"></script>
<script type="text/javascript"
src="/JQueryUpload/js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript"
src="/JQueryUpload/js/jquery.captcha.js"></script>
<script type="text/javascript" charset="gbk">
$(function() {
$(".ajax-fc-container").captcha({formId: "myForm"});
});
function login()
{
var code = document.getElementById("captchacode");
if(code==null)
{
alert("请拖动提示中给的元素!");
return false;
}
document.myForm.submit();
}
</script>
<link rel="stylesheet" type="text/css"
href="/JQueryUpload/captcha/captcha.css"></link>
</head>
<body>
<form action="/JQueryUpload/Login.do" id="myForm" name="myForm" method="post">
<div class="ajax-fc-container"></div>
<!--该DIV就是产生验证码图片的地方-->
<input type="button" value="提交" onclick="login();"/>
</form>
</body>
</html>
JSP页面处理好以后,需要处理的就是JS代码了,JS代码其实很简单,就在jquery.captcha.js
文件内,这里需要注意两点:
一、验证的基本显示,例如把相应的英文改成相应的中文等,其实很简单,如:
... var defaults = { borderColor: "", captchaDir: "captcha", url: "/JQueryUpload/RandomCode.do",
//该URL就是产生验证码所提交到服务器端的请求,当验证图片出现,自动去链接 formId: "myForm", text: "<font size='2'>您想获取企业么?<br />请拖动 <span>scissors</span> 进入圆圈内.</font>", items: Array("pencil", "scissors", "clock", "heart", "note") }; ..
二、需要从服务端获得随机数字,这里需要用到AJAX请求,上面的URL就是相应的请求路径。getNumber表示请求执行此Action的getNumber方法,说到服务端,还真是麻烦,JAVA Web框架众多,但大多都复杂,就算古老的Struts,也依赖很多包,还要搞一堆配置,Struts2虽然功能强大,但用来照样有些复杂,更不用说其它的wicket,Tapestry了,就做一个简单的例子实在不想用那些复杂的框架,但是也不愿意直接用Servlet,还是Stripes好啊!功能强大,最让人称道的是它依赖的JAR特别少,只有一个common-logging文件,总算做了件好事。下面以Stripes为例,服务端的关键代码如下:
首先写RandomCodeAction
package com.action;
import java.util.Random;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
public class RandomCodeAction extends Action {
@Override
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
response.setContentType("text/plain");
int captcha = new Random().nextInt(5);
HttpSession session = request.getSession();
session.setAttribute("code", captcha);
response.getWriter().write(captcha + "");
return null;
}
}
//该ACTION会产生一个随机数保存到SESSION中,以便于你前端提交表单时候提交的验证码进行匹配;
4.配置struts.config.xml
<action path="/UploadAction"
type="com.action.UploadAction"
scope="request" validate="false">
</action>
<action path="/RandomCode"
type="com.action.RandomCodeAction"
scope="request" validate="false">
</action>
<action path="/Login"
type="com.action.LoginAction"
scope="request" validate="false">
</action>
通过上面几步,就可以看见基本的效果了:
在拖动图片到圆圈内时,Fancy会创建一个隐藏字段,代码如下:
- ...
- $("#" + options.formId).append("<input type=\"hidden\" style=\"display: none;\" name=\"captcha\" value=\"" + rand + "\">");
- ...
... $("#" + options.formId).append("<input type=\"hidden\" style=\"display: none;\" name=\"captcha\" value=\"" + rand + "\">"); ...
这个字段的值就是从服务端传过来的数字,因此判断验证是否通过,只需要在服务端判断
字段captcha的值是否与刚才从服务端传过来的数字是否相等即可;
写完!
- ajax-fancy-captcha-php.zip (66.4 KB)
- 下载次数: 35
- 验证码的DEMO文件.rar (148 KB)
- 下载次数: 81
发表评论
-
flash+xml动态加载图片
2012-06-25 21:26 1309flash+xml动态加载图片 -
js去掉回车与空格
2012-05-08 08:50 1288$(function() { var flag = ... -
转:解剖JavaScript中的null和undefined
2012-02-07 09:46 944在JavaScript开发中,被人 ... -
jquery 样式的按钮
2011-10-12 09:19 900jquery 样式的按钮 -
jQuery的radio,checkbox,select操作
2011-09-29 22:28 928获取一组radio被选中项的值 var item = $(' ... -
javascript---parseInt("08")或parseInt("09")转换返回0的解决办法
2011-09-15 18:23 1115javascript parseInt函数使用率非常高,主 ... -
jquery ui 的datepicker日期插件使用
2011-05-17 22:12 1869首先是下载所需要的JS ... -
Jquery缓存页面内容(功能很强大)
2011-05-17 22:10 1776我们在做项目的时候, ... -
Jquery的自动填充功能
2011-05-17 22:10 1352完成JQUERY的自动填充功能:首先在页面要去去要填充数据:页 ... -
Jquery读取Json并解析
2011-05-17 22:09 1351客户端访问服务器后ACTION中的代码:[Descriptio ... -
Jquery 读取解析xml文件并解析
2011-05-17 22:08 1771Menus.xml<?xml version=" ... -
用JS实现刻度尺形式的报表
2011-05-17 21:54 1940现在项目有个需求,想根据刻度尺来表示24个小时,然后通过类似进 ... -
ymprompt弹出层替代window自带弹出层
2011-05-10 22:35 2100ymPrompt消息提示组件4.0 ... -
jqgrid 的treegrid用法
2011-04-15 21:14 2372工作中用到的。先上效果。以后再结合asp.net mvc3来做 ... -
学习Meta标签
2010-04-14 08:28 907一直以来有很多人却忽 ... -
图片IMG垂直居中align=absmiddle属性通不过验证,用CSS解决
2010-04-12 08:35 4007原帖地址:http://www.aa25.cn/content ... -
有时候document.thisForm.submit()函数浏览器报错的原因
2010-04-08 17:08 2314我的原因是在FORM里面的提交按钮的NAME="su ... -
主题:Uploadify上传插件中文乱码问题解决方法
2010-04-08 09:21 4533在使用Uploadify插件进行文件上传时,当上传的文件名包含 ... -
jQuery上传插件Uploadify使用详解
2010-04-08 09:06 5108下面就来介绍下这些key值的意思:uploader : upl ... -
Uploadify 插件的使用 java 版 jsp+servlet
2010-04-08 08:48 9979工程截图: jar包: commons-fileu ...
相关推荐
jquery的验证码插件Fancy Captcha官方的资源包
jquery验证码插件Fancy Captcha asp.net版
在`script.js`文件中,我们可以看到如何使用jQuery的`$.ajax()`函数。例如: ```javascript $.ajax({ type: 'POST', // 请求类型,这里是POST url: 'demo.php', // 要请求的服务器端脚本 data: {key: 'value'}, ...
89. 参考JQZOOM插件使用jQuery仿京东网产品展示切换及放大效果的代码 90. 又一款jquery自动轮播焦点图+内容的广告代码 91. 又一款非常不错的jQuery+div大气新闻图片切换插件代码(AnythingSlider)下载 92. 基于...
本资源提供了多个基于jQuery的导航插件打包下载,这些插件能够帮助开发者创建功能丰富、视觉吸引人的网页导航菜单。 1. **jQuery Wanderwall**:这个插件可能提供一种独特的导航体验,名为"Wanderwall",可能是通过...
2. 引入Fancy Input插件:同样通过`<script>`标签引入插件的JavaScript文件,并确保在jQuery库之后引入。 3. CSS样式:添加必要的CSS样式以应用动画效果。 4. 初始化插件:通过jQuery选择器找到目标Input元素,并...
26. jQuery实现图片3D旋转特效插件 v1.1版本下载 27. jQuery实现图片3D立体感的前后轮番展示特效 28. jQuery实现图片取景器仿相机拍照功能的插件photoShoot 29. jQuery实现图片变色特效插件与实例下载如jquery...
Ajax-Fancy-CAPTCHA-PHP 是一个创新的验证码解决方案,它结合了Ajax技术和JavaScript,为用户提供了一种互动且趣味性的验证体验。这个项目的核心目的是在防止自动化机器人和恶意攻击的同时,提供一个用户友好的界面...
实用jquery使用ul模拟表单select列表效果 22.实用jQuery无限级导航菜单源码下载 23.适合于网站注册的jQuery用户注册条款插件下载(带特效) 24.提升用户体验jquery Ajax表单输入检测验证示例代码 25.推荐...
26. jQuery实现图片3D旋转特效插件 v1.1版本下载 27. jQuery实现图片3D立体感的前后轮番展示特效 28. jQuery实现图片取景器仿相机拍照功能的插件photoShoot 29. jQuery实现图片变色特效插件与实例下载如jquery...
26. jQuery实现图片3D旋转特效插件 v1.1版本下载 27. jQuery实现图片3D立体感的前后轮番展示特效 28. jQuery实现图片取景器仿相机拍照功能的插件photoShoot 29. jQuery实现图片变色特效插件与实例下载如jquery...
最后,Workless是一个轻量级的前端框架,专注于提供基础的CSS和JavaScript组件,它在"jQuery Ultimate Fancy Form"中的使用可能是为了进一步优化性能,减少不必要的资源加载,让表单在低配设备上也能流畅运行。...
1. **Fancy Zoom (jQuery)**:这是一个由John重写并引入jQuery的插件,最初基于Prototype和Scriptaculous。Fancy Zoom提供了图片的放大功能,增强了用户交互体验。 2. **Lightbox2**:这是一个简洁且兼容所有浏览器...
xZoom是一款基于JavaScript库jQuery开发的图片预览插件,它的主要功能是为用户提供一种互动式的图片预览体验,用户可以通过鼠标悬停在图片上,看到一个放大镜效果的预览图,仿佛在实体店中使用放大镜观察商品细节...
**jQuery图片放大镜插件ez-plus.js** 是一个基于JavaScript库**jQuery**的高效解决方案,用于为网站上的图片添加交互式的放大功能。该插件允许用户在不离开原始页面的情况下,对图片进行细致查看,提高了用户体验,...
在这个“jquery图片放大的例子(fancyzoom)”中,我们将探讨如何利用jQuery实现高质量的图片放大效果,特别是使用一个名为FancyZoom的插件。 FancyZoom是一种基于jQuery的图片放大解决方案,它提供了优雅且用户...
Lettering.js是一个轻量经的、易于使用的jQuery插件,可创造出极具个性的网页排版,是2010年最佳jQuery插件之一。 New FancyMoves Jquery Product Slider Jquery Product Slider是一款效果很不错的产品幻灯片插件...