使用JQuery和s3captche实现一个水果名字的验证

先看个图片

1.介绍：s3captcha是一个非常有用的可以让图片顺序显示的一个JQuery插件。它是通过服务器端编程语言(专业超文本预处理器的缩写)实现的。但是我发现很容易把它转化为ASP。网和C#的代码。我做了一个配置的配置文件可以在文件中配置图片的源和名字等。然后介绍一下s3captcha的实现原理

上图所示是它的实现模式。 1.它随即生成图片的指数；2.把一系列随机数据赋给图片的索引。3.可以从图片列表中选择一个随机的索引。4.让图片随机的显示为一个无线电盒。它使用JQuery实现的无线电盒到图片目录的转换。 2.代码： 首先是把图片的指数数组顺序打乱，重新输出：复制代码代码如下：公共静态Listint shuffle(Listint输入){ Listint输出=new Listint()；Random rnd=new Random()；int FIndexwhile(输入。计数0) { FIndex=rnd .下一个(0，输入。计数);输出添加(输入[FindeX])；输入在(FindeX)处移除；}输入clear()；输入=nullrnd=null返回输出；}使用可扩展标记语言来作为s3captche的配置文件：复制代码代码如下：可扩展标记语言版本='1.0 '编码='utf-8 '？s3capcha图标名称苹果、樱桃、柠檬、梨、草莓/名称标题苹果、樱桃、柠檬、梨、草莓/标题宽度33/宽度高度33/高度ext jpg/ext folderfruit/folder/图标消息验证您是人类而不是机器人，请选择{ 0 }/message/s3cap chagethtml代码的代码：复制代码代码如下：公共静态字符串GetHtmlCodes(字符串PathTo，out int会话值){ bool有值=false如果(字符串IsNullOrEmpty(Message))HasValue=LoadConfig()；else has value=true if(has value){ Random Rnd=new Random()；（同Internationalorganizations）国际组织随机化ndex=Rnd .下一个(0,图标名称。长度);Listint值=new Listint()；for(int I=0；一、图标名称。长度；(一)价值观。添加;values=shuffle(值);字符串写这个=' div class=\ ' s3cap cha ' p '字符串。格式（消息，"强"图标标题[值[随机索引]]'/strong)'/p '；int[]RandomValues=new int[IconNames .长度];for(int I=0；一、图标名称。长度；i ) { RandomValues[i]=Rnd .next()；WriteThis=字符串。格式（行模板、图标标题[值[i]]，随机值[i]，路径/图标/"文件夹"/图标名称[值[i]]' ."延伸、宽度、高度);}写入此=' div style=' \ ' style=' \ ' clear : left \ '/div/div '；会话值=随机值[随机索引]；返回WriteThis} else {会话值=-1；返回"无效数据，未找到配置文件";} }3.使用创建交互式、快速动态网页应用的网页开发技术方法来实现验证信息的判断弹出框： s3capcha.ashx用来实现当向服务器请求时，返回html:复制代码代码如下：公共无效进程请求(HttpContext上下文){上下文.响应。content TYPe=' text/html '；int usesession语境。回应。写(s3capcha .GetHtmlCodes('././s3capcha '，out UseSession))；语境会话[s3cap cha。s3name]=use session；语境。响应。end()；}verify.ashx文件来实现验证功能： 复制代码代码如下：公共无效进程请求(HttpContext上下文){上下文.响应。内容类型='文本/纯文本；if (s3capcha .验证（上下文会话[s3capcha.s3name]，上下文请求。表单[s3capcha.s3name])上下文。回应。写下("成功");其他上下文。响应。写入("失败");语境。响应。end()；}JQuery实现的创建交互式、快速动态网页应用的网页开发技术代码：复制代码代码如下：//Javascript代码$(文档)。ready(function(){ getCapcha()；$(“表单”).bind('submit '，function() { $).ajax({ url: 'verify.ashx '，type: 'POST '，data : { ' s3cap cha ' : $(' input[name=s3cap cha]: checked ').val() }，cache: false，success:函数（数据){ alert(数据);getCapcha()；} });返回false })；});