现在大部分网站登陆时都会要求输入验证码,在网上也看了一些范例,现在总结一下如何实现无刷新页面生成验证码。
效果图:
实现方式:
前台:
<div> <span>Identifying Code:</span> <asp:TextBox ID="txtValidationCode" runat="server" Width="130px" MaxLength="4"></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:
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(4); context.Session["random"] = s_random; s_random = s_random.Substring(0, 1) + " " + s_random.Substring(1, 1) + " " + s_random.Substring(2, 1) + " " + s_random.Substring(3, 1); 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 * 18); System.Drawing.Bitmap image = new System.Drawing.Bitmap(iwidth, 45); 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(); //随机
备注:
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方法,从而获取新的验证码】