超级简单的无刷新验证码（抛弃ajax）

首先画一个验证码，这个很简单吧。

贴下代码

imageValidate.aspx

protected void Page_Load(object sender, EventArgs e)
   {
       //生成4位的验证码
       CreateCheckCodeImage(GenerateCheckCode());
   }
   private string GenerateCheckCode()
   {
       int number;
       char code;
       string checkCode = String.Empty;

       System.Random random = new Random();

       for (int i = 0; i < 5; i++)
       {
           number = random.Next();

           if (number % 2 == 0)
               code = (char)('0' + (char)(number % 10));
           else
               code = (char)('A' + (char)(number % 26));

           checkCode += code.ToString();
       }
       Session["CheckCode"] = checkCode;
       return checkCode;
   }

   private void CreateCheckCodeImage(string checkCode)
   {
       if (checkCode == null || checkCode.Trim() == String.Empty)
           return;

       System.Drawing.Bitmap image = new System.Drawing.Bitmap((int)Math.Ceiling((checkCode.Length * 12.5)), 22);
       Graphics g = Graphics.FromImage(image);

       try
       {
           //生成随机生成器
           Random random = new Random();

           //清空图片背景色
           g.Clear(Color.White);

           //画图片的背景噪音线
           for (int i = 0; i < 25; i++)
           {
               int x1 = random.Next(image.Width);
               int x2 = random.Next(image.Width);
               int y1 = random.Next(image.Height);
               int y2 = random.Next(image.Height);

               g.DrawLine(new Pen(Color.Silver), x1, y1, x2, y2);
           }

           Font font = new System.Drawing.Font("Arial", 12, (System.Drawing.FontStyle.Bold | System.Drawing.FontStyle.Italic));
           System.Drawing.Drawing2D.LinearGradientBrush brush = new System.Drawing.Drawing2D.LinearGradientBrush(new Rectangle(0, 0, image.Width, image.Height), Color.Blue, Color.DarkRed, 1.2f, true);
           g.DrawString(checkCode, font, brush, 2, 2);

           //画图片的前景噪音点
           for (int i = 0; i < 100; i++)
           {
               int x = random.Next(image.Width);
               int y = random.Next(image.Height);

               image.SetPixel(x, y, Color.FromArgb(random.Next()));
           }

           //画图片的边框线
           g.DrawRectangle(new Pen(Color.Silver), 0, 0, image.Width - 1, image.Height - 1);

           System.IO.MemoryStream ms = new System.IO.MemoryStream();
           image.Save(ms, System.Drawing.Imaging.ImageFormat.Gif);
           Response.ClearContent();
           Response.ContentType = "/image/Gif";
           Response.BinaryWrite(ms.ToArray());
       }
       finally
       {
           g.Dispose();
           image.Dispose();
       }
   }

然后在登陆页面加一个img用来显示验证码

<img alt="验证码" class="validImage" id="vimg" src="/include/imageValidate.aspx" style="cursor:pointer"/>

在添加一个onclick事件this.src='/include/imageValidate.aspx?id='+(Math.random()%13);

如果直接写this.src = imageValidate.aspx 那么访问这个验证码会被缓存那么就不能达到无刷新的目的

我们在页面后面加了随机的一个地址查询，这样就该页面就不会被浏览器缓存。这样我们每次点击后的验证码都可能是不一样的了~