现在大部分网站登陆时都会要求输入验证码,在网上也看了一些范例,现在总结一下如何实现无刷新页面生成验证码。

效果图:

实现方式:

前台:

 <div>
<span>Identifying Code:</span>
<asp:TextBox ID="txtValidationCode" runat="server" Width="130px" MaxLength=""></asp:TextBox>
<img id="imgYZ" class="code" style=" height:23px; width:65px;"
src="Img.ashx" onclick="this.src=this.src+'?'"/ />
<img src="../images/btn_change.gif" title="Change" class="btn_change" Style="cursor: hand"
onclick="ImgChange()" />
</div>

JS:

 <script language="javascript" type="text/javascript">
function ImgChange()
{
var img=document.getElementById("imgYZ");
img.click();
}
</script>

ashx:

 <%@ WebHandler Language="C#" Class="Img" %>

 using System;
using System.Web;
using CLAIMS.BLL;
using System.Data;
using System.Configuration;
using System.Web.SessionState;
using System.Drawing; public class Img : IHttpHandler, IRequiresSessionState
{ public void ProcessRequest (HttpContext context)
{
context.Response.ContentType = "image/Jpeg"; string s_random = "";
System.IO.MemoryStream ms = new System.IO.MemoryStream();
s_random = RndNum();
context.Session["random"] = s_random;
s_random = s_random.Substring(, ) + " " + s_random.Substring(, ) + " " + s_random.Substring(, ) + " " + s_random.Substring(, ); CreateImage(s_random, ref ms);
context.Response.ClearContent();
context.Response.BinaryWrite(ms.ToArray()); context.Response.Flush();
context.Response.End();
} private void CreateImage(string checkCode,ref System.IO.MemoryStream ms)
{
int iwidth = (int)(checkCode.Length * );
System.Drawing.Bitmap image = new System.Drawing.Bitmap(iwidth, );
Graphics g = Graphics.FromImage(image);
g.Clear(Color.White);
//定义颜色
Color[] c = { Color.Black, Color.Red, Color.DarkBlue, Color.Green, Color.Orange, Color.Brown, Color.DarkCyan, Color.Purple };
//定义字体
//string[] font = {"Verdana","Microsoft Sans Serif","Comic Sans MS","Arial","宋体"};
Random rand = new Random();
//随机输出噪点
for (int i = ; i < ; i++)
{
int x = rand.Next(image.Width);
int y = rand.Next(image.Height);
g.DrawRectangle(new Pen(Color.LightGray, ), x, y, , );
} //输出不同字体和颜色的验证码字符 for (int i = ; i < checkCode.Length; i++)
{
int cindex = rand.Next();
int findex = rand.Next();
Font font = new System.Drawing.Font("Arial", , (System.Drawing.FontStyle.Bold | System.Drawing.FontStyle.Italic));
Brush b = new System.Drawing.SolidBrush(c[cindex]);
int ii = ;
if ((i + ) % == )
{
ii = ;
}
g.DrawString(checkCode.Substring(i, ), font, b, + (i * ), ii);
}
//画一个边框 g.DrawRectangle(new Pen(Color.Black, ), , , image.Width - , image.Height - ); //输出到浏览器
image.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg); g.Dispose();
image.Dispose();
} public static String RndNum(int VcodeNum)
{
String Vchar = "0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,W,X,Y,Z";
String[] VcArray = Vchar.Split(',');
String VNum = "";
Random random = new Random();
for (int i = ; i <= VcodeNum; i++)
{
int iNum = ;
while ((iNum = Convert.ToInt32(VcArray.Length * random.NextDouble())) == VcArray.Length)
{
iNum = Convert.ToInt32(VcArray.Length * random.NextDouble());
}
VNum += VcArray[iNum];
}
return VNum;
} public bool IsReusable {
get {
return false;
}
} }

备注:

onclick="this.src=this.src+'?'"

之前一直不明白为什么要加一个?号,于是去网上搜索,参考一下前辈们的见解:

【这是表示当前图片链接,在当前链接值的基础上添加了一个问号
譬如当前src="check.aspx",点击后就变成了"check.aspx?",继续点就会变成"check.aspx?????"
这个问号是没有实际意义的,它唯一的作用是向IE表明: 图片链接发生了变化,图片需要刷新.】

【GET:当客户端要从服务器中读取文档时,使用GET方法。GET方法要求服务器将URL定位的资源放在响应报文的数据部分,回送给客户端。使用GET方法时,请求参数和对应的值附加在URL后面,利用一个问号(“?”)代表URL的结尾与请求参数的开始,传递参数长度受限制。例如,/index.jsp?id=100&op=bind。
POST:当客户端给服务器提供信息较多时可以使用POST方法。POST方法将请求参数封装在HTTP请求数据中,以名称/值的形式出现,可以传输大量数据。
this.src=this.src+'?'是将this.src原值后加上?,以便向服务器发送一个新的GET方法,从而获取新的验证码】

感恩前辈们的分享,我会向你们学习,把分享的精神传递给身边更多的人。

ASP.NET ashx实现无刷新页面生成验证码的更多相关文章

  1. 只需要4步就可以将asp.net mvc变成SPA(单页面)应用,实现无刷新页面切换!

    SENNA.js Senna.js是一个超快速的单页面应用程序引擎,轻松构建基于Web的现代应用程序,只有大约8KB的JavaScript而没有任何依赖性.还提供非常酷炫的动画效果.想要详细了解的朋友 ...

  2. ASP.NET—015:ASP.NET中无刷新页面实现

    原文作者:杨友山 原文地址:http://blog.csdn.net/yysyangyangyangshan/article/details/39679823 前面也说过在asp.net中前后前交互的 ...

  3. 使用AJAX做关键字查询:输入框变化自动搜索、无刷新页面;

    使用AJAX做关键字查询要求:1.无刷新页面2.输入框变化自动搜索 <style type="text/css"> .k{ width:150px; height:30 ...

  4. Ajax 实现无刷新页面

    注意:如本文所用,在前面的文章库的数目可以在源代码中找到,我将指示在文本,其中链路,为了缩短制品的长度,阅读由此带来的不便.乞求被原谅. 评论文章 Ajax 实现无刷新页面.其原理.代码库.代码. 这 ...

  5. JSF中使用f:ajax标签无刷新页面改变数据

    ajax本是用在前端的一种异步请求数据的操作,广泛用于js中,一般的js框架如jq都有被封装好的方法,用于发起异步请求操作.异步操作可以增强用户体验和操作,越来越多的程序都在使用ajax.JSF的fa ...

  6. Asp:Button控件onclick事件无刷新页面提示消息

    <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptMana ...

  7. Asp.net 2.0 无刷新图片上传 显示缩略图 具体实现

    简单三步实现图片无刷新上传:注意是上传,至于上传时的验证,比如图片的尺寸,大小,格式判断.限制等,自行解决. 兼容性想还不错:FF,CH,IE,猎豹,都是可以实现的.如果看到回显.当然就是成功了. 经 ...

  8. ASP.NET MVC3实现无刷新验证码

    在MVC中进行留言,评论等功能时,不可避免会用到表单提交时的验证码问题,有时,我们的作法是,当表单被提交后,在controller里去判断验证码的正确与否,但我认为这种用户体验是很差的,今天正好有后时 ...

  9. PHP + JavaScript + Ajax 实现无刷新页面加载效果

    数据源工厂 Json生成方式1 Json生成方式2 数据搬运工 数据加工师 转换类型 加工展示 结果展示 初始页面 点击按钮之后 总结 今天这个实验的思路就是实现一个无刷新的页面加载效果.具体的思路是 ...

随机推荐

  1. html focus事件小学问

    focus事件千万不要有alert方法,不然在有些浏览器会进入死循环的.例如:$('#test').focus(function(){ alert('dead loop'); }); 在chrome下 ...

  2. linux下jdk和tomcat的安装配置

    操作系统:centos (32bit) 1.  下载合适的安装包. 原则是:安装包类型和(bit)位数要与操作系统一致,tomcat和jdk的版本要兼容,如: apache-tomcat-6.0.37 ...

  3. 修改tomcat应用日志默认编码格式

    前言 今天开发跟我说tomcat日志中的中文不能正常显示,根据以往的经验,我觉得可能跟服务器的编码有关,于是尝试各种方法,但还是没能解决问题. 后来我突然想到会不会跟tomcat的设置有关呢,于是在网 ...

  4. My97DatePicker 日期控制,开始时间不能>结束时间,结束时间不能<开始时间

    <li>日期: <input type="text" style="margin-top: 5px;" value="${begin ...

  5. Parquet与ORC:高性能列式存储格式(收藏)

    背景 随着大数据时代的到来,越来越多的数据流向了Hadoop生态圈,同时对于能够快速的从TB甚至PB级别的数据中获取有价值的数据对于一个产品和公司来说更加重要,在Hadoop生态圈的快速发展过程中,涌 ...

  6. RabbitMQ 入门指南(Java)

    RabbitMQ是一个受欢迎的消息代理,通常用于应用程序之间或者程序的不同组件之间通过消息来进行集成.本文简单介绍了如何使用 RabbitMQ,假定你已经配置好了rabbitmq服务器. Rabbit ...

  7. 文法 LL1

    <程序>-><声明列表>|<程序><函数> <声明列表>-><声明>|<声明><声明列表> ...

  8. unity 3d孤岛求生案例代码解析

    这是第一人称控制器脚本,如果把摄像机放在胶囊体后面感觉就是第三人称了啊. #pragma strict var speed : float = 6.0; var jumpspeed: float = ...

  9. html5 自定义验证信息

      h5 为表单新增了很多类型,及属性. 根据这些新增的类型及属性 h5也为我们提供了验证这些数据的js函数,这些验证表单的函数都存在了ValidityState对象中,接下来让我们一起来了解一下这些 ...

  10. scikit-learn实现ebay数据分析 的随笔

    注:只是随笔 import pandas as pd train = pd.read_csv()  读入scv格式的文件 train = train_set.drop(['EbayID','Quant ...