现在大部分网站登陆时都会要求输入验证码，在网上也看了一些范例，现在总结一下如何实现无刷新页面生成验证码。
效果图：
实现方式：
前台：
1 <div> 2 <span>Identifying Code:</span> 3 <asp:TextBox ID="txtValidationCode" runat="server" Width="130px" MaxLength="4"></asp:TextBox> 4 <img id="imgYZ" class="code" style=" height:23px; width:65px;" 5 src="Img.ashx" onclick="this.src=this.src+'?'"/ /> 6 <img src="../images/btn_change.gif" title="Change" class="btn_change" Style="cursor: hand" 7 onclick="ImgChange()" /> 8 </div>
JS：
1 <script language="javascript" type="text/javascript"> 2 function ImgChange() 3 { 4 var img=document.getElementById("imgYZ"); 5 img.click(); 6 } 7 </script>
ashx:
1 <%@ WebHandler Language="C#" Class="Img" %> 2 3 using System; 4 using System.Web; 5 using CLAIMS.BLL; 6 using System.Data; 7 using System.Configuration; 8 using System.Web.SessionState; 9 using System.Drawing; 10 11 public class Img : IHttpHandler, IRequiresSessionState 12 { 13 14 public void ProcessRequest (HttpContext context) 15 { 16 context.Response.ContentType = "image/Jpeg"; 17 18 string s_random = ""; 19 System.IO.MemoryStream ms = new System.IO.MemoryStream(); 20 s_random = RndNum(4); 21 context.Session["random"] = s_random; 22 s_random = s_random.Substring(0, 1) + " " + s_random.Substring(1, 1) + " " + s_random.Substring(2, 1) + " " + s_random.Substring(3, 1); 23 24 CreateImage(s_random, ref ms); 25 context.Response.ClearContent(); 26 context.Response.BinaryWrite(ms.ToArray()); 27 28 context.Response.Flush(); 29 context.Response.End(); 30 } 31 32 private void CreateImage(string checkCode,ref System.IO.MemoryStream ms) 33 { 34 int iwidth = (int)(checkCode.Length * 18); 35 System.Drawing.Bitmap image = new System.Drawing.Bitmap(iwidth, 45); 36 Graphics g = Graphics.FromImage(image); 37 g.Clear(Color.White); 38 //定义颜色 39 Color[] c = { Color.Black, Color.Red, Color.DarkBlue, Color.Green, Color.Orange, Color.Brown, Color.DarkCyan, Color.Purple }; 40 //定义字体 41 //string[] font = {"Verdana","Microsoft Sans Serif","Comic Sans MS","Arial","宋体"}; 42 Random rand = new Random(); 43 //随机输出噪点 44 for (int i = 0; i < 50; i++) 45 { 46 int x = rand.Next(image.Width); 47 int y = rand.Next(image.Height); 48 g.DrawRectangle(new Pen(Color.LightGray, 0), x, y, 1, 1); 49 } 50 51 //输出不同字体和颜色的验证码字符 52 53 for (int i = 0; i < checkCode.Length; i++) 54 { 55 int cindex = rand.Next(7); 56 int findex = rand.Next(5); 57 Font font = new System.Drawing.Font("Arial", 24, (System.Drawing.FontStyle.Bold | System.Drawing.FontStyle.Italic)); 58 Brush b = new System.Drawing.SolidBrush(c[cindex]); 59 int ii = 4; 60 if ((i + 1) % 2 == 0) 61 { 62 ii = 2; 63 } 64 g.DrawString(checkCode.Substring(i, 1), font, b, 3 + (i * 12), ii); 65 } 66 //画一个边框 67 68 g.DrawRectangle(new Pen(Color.Black, 0), 0, 0, image.Width - 1, image.Height - 1); 69 70 //输出到浏览器 71 image.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg); 72 73 g.Dispose(); 74 image.Dispose(); 75 } 76 77 public static String RndNum(int VcodeNum) 78 { 79 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"; 80 String[] VcArray = Vchar.Split(','); 81 String VNum = ""; 82 Random random = new Random(); 83 for (int i = 1; i <= VcodeNum; i++) 84 { 85 int iNum = 0; 86 while ((iNum = Convert.ToInt32(VcArray.Length * random.NextDouble())) == VcArray.Length) 87 { 88 iNum = Convert.ToInt32(VcArray.Length * random.NextDouble()); 89 } 90 VNum += VcArray[iNum]; 91 } 92 return VNum; 93 } 94 95 public bool IsReusable { 96 get { 97 return false; 98 } 99 } 100 101 }
备注：
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方法，从而获取新的验证码】
感恩前辈们的分享，我会向你们学习，把分享的精神传递给身边更多的人。
如果您看了本篇博客,觉得对您有所收获，请点击右下角的 [推荐]
如果您想转载本博客，请注明出处
如果您对本文有意见或者建议，欢迎留言
感谢您的阅读，请关注我的后续博客
