02-17 位圖驗證碼（通常處理程序）+AJAX

時間 2019-11-30

標籤位圖驗證碼通常處理程序 ajax 欄目 Ajax 简体版

原文原文鏈接

創建一個空網站，在設計界面工具箱中拖入一個TextBox工具，一個按鈕，外加一個Image圖片工具（充當數字、字母以圖片形式）。可是這樣作出來的驗證碼會出現一個問題，每當點擊一下按鈕，界面自動提交一遍，從新刷新一遍再返回，爲防止整個頁面被從新提交，須要加入一個UpdatePanel，只刷新當前updatePanel內的內容便可。html

必需要結合AJAX來使用數據庫

界面設計好後，須要添加一個以ashx結尾的文件項，在這裏面寫位圖隨機驗證碼的格式等等。session

 1 <%@ WebHandler Language="C#" Class="Code" %>
 2 
 3 using System;
 4 using System.Web;
 5 using System.Drawing;
 6 using System.Drawing.Drawing2D;
 7 using System.Drawing.Imaging;
 8 using System.Web.SessionState;
 9 //通常處理程序要使用session,必需要繼承IRequiresSessionState接口（接口就是一個空的方法），session存在於這個接口中
10 public class Code : IHttpHandler,IRequiresSessionState {
11     
12     public void ProcessRequest (HttpContext context) {
13         context.Response.ContentType = "image/jpeg";
14         Bitmap img = new Bitmap(50, 20);//位圖，畫了一個空白的圖形
15         Graphics g = Graphics.FromImage(img);//
16        
17         string s = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
18         string str = "";
19         Random rand = new Random();//初始化隨機數
20         for (int i = 0; i < 4; i++)
21         {
22             int start = rand.Next(62); //生成一個隨機的起始位置
23             str += s.Substring(start, 1).ToString();
24         }
25         context.Session["code"] = str;//session用於傳值
26         
27         Font font = new Font("宋體",12, FontStyle.Bold);//設置字體格式
28         SolidBrush brush = new SolidBrush(Color.White);
29         g.FillRectangle(brush, 0, 0, 50, 20);
30         brush.Color = Color.Red;
31         g.DrawString(str, font, brush, 0, 0);
32         img.Save(context.Response.OutputStream, ImageFormat.Jpeg);
33     }
34  
35     public bool IsReusable {
36         get {
37             return false;
38         }
39     }
40 
41 }

通常處理程序：有一個頁面A,傳遞參數到通常處理程序,處理程序接收到參數,訪問數據庫,判斷正確,跳轉下一個頁面,錯誤,跳轉到另外一個頁面.

在aspx的Js源代碼中，寫function語句，確保傳遞參數dom

 1 <body>
 2     <form id="form1" runat="server">
 3     <div>
 4     
 5     
 6         <asp:ScriptManager ID="ScriptManager1" runat="server">
 7         </asp:ScriptManager>
 8     
 9     </div>
10         <p>
11             &nbsp;</p>
12 
13                 <asp:Image ID="Image1" runat="server" ImageUrl="~/Code.ashx" />
14 
15                 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
16                 <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
17                 <asp:Label ID="Label1" runat="server" Text="失敗"></asp:Label>
18     </form>
19 </body>
20 </html>
21 <script>
22 //js方法
23     function changeimg()
24     {
25         var img = document.getElementById("Image1");
26         img.src = "Code.ashx?1=" + Math.random();//使用母版頁以後，本身寫的ID和JS生成的ID會不同，須要手動更改ID（方法1）
27     }
28 </script>
29 //方法2：嵌生成以後的ID
30 <script>
31     function changeimg()
32     {
33         var img = document.getElementById("<%=Image1.ClientID%>"); //使用經<% %>轉譯以後ID
34         img.src = "Code.ashx?1=" + Math.random();
35     }
36 </script>