現(xiàn)在大部分網(wǎng)站登陸時都會要求輸入驗證碼，在網(wǎng)上也看了一些范例，現(xiàn)在總結(jié)一下如何實現(xiàn)無刷新頁面生成驗證碼。
效果圖：
實現(xiàn)方式：
前臺：
|
1
2
3
4
5
6
7
8
|
<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;" <img src="../images/btn_change.gif" title="Change" class="btn_change" Style="cursor: hand" onclick="ImgChange()" /></div> |
JS：
|
1
2
3
4
5
6
7
|
<script language="javascript" type="text/javascript"> function ImgChange() { var img=document.getElementById("imgYZ"); img.click(); } </script> |
ashx:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
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(); //隨機(jī)輸出噪點 for (int i = 0; i < 50; i++) { int x = rand.Next(image.Width); int y = rand.Next(image.Height); g.DrawRectangle(new Pen(Color.LightGray, 0), x, y, 1, 1); } //輸出不同字體和顏色的驗證碼字符 for (int i = 0; i < checkCode.Length; i++) { int cindex = rand.Next(7); int findex = rand.Next(5); Font font = new System.Drawing.Font("Arial", 24, (System.Drawing.FontStyle.Bold | System.Drawing.FontStyle.Italic)); Brush b = new System.Drawing.SolidBrush(c[cindex]); int ii = 4; if ((i + 1) % 2 == 0) { ii = 2; } g.DrawString(checkCode.Substring(i, 1), font, b, 3 + (i * 12), ii); } //畫一個邊框 g.DrawRectangle(new Pen(Color.Black, 0), 0, 0, image.Width - 1, image.Height - 1); //輸出到瀏覽器 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 = 1; i <= VcodeNum; i++) { int iNum = 0; 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+'?'"
之前一直不明白為什么要加一個？號，于是去網(wǎng)上搜索，參考一下前輩們的見解：
【這是表示當(dāng)前圖片鏈接，在當(dāng)前鏈接值的基礎(chǔ)上添加了一個問號
譬如當(dāng)前src="check.aspx",點擊后就變成了"check.aspx?"，繼續(xù)點就會變成"check.aspx?????"
這個問號是沒有實際意義的,它唯一的作用是向IE表明: 圖片鏈接發(fā)生了變化,圖片需要刷新.】
【GET：當(dāng)客戶端要從服務(wù)器中讀取文檔時，使用GET方法。GET方法要求服務(wù)器將URL定位的資源放在響應(yīng)報文的數(shù)據(jù)部分，回送給客戶端。使用GET方法時，請求參數(shù)和對應(yīng)的值附加在URL后面，利用一個問號（“?”）代表URL的結(jié)尾與請求參數(shù)的開始，傳遞參數(shù)長度受限制。例如，/index.jsp?id=100&op=bind。
POST：當(dāng)客戶端給服務(wù)器提供信息較多時可以使用POST方法。POST方法將請求參數(shù)封裝在HTTP請求數(shù)據(jù)中，以名稱/值的形式出現(xiàn)，可以傳輸大量數(shù)據(jù)。
this.src=this.src+'?'是將this.src原值后加上？，以便向服務(wù)器發(fā)送一個新的GET方法，從而獲取新的驗證碼】
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://www.cnblogs.com/AnneHan/p/5555605.html
