div彈出層的ajax登錄(Jquery版)

 

今天別人都在休息,還要上班,自我安慰一下,他人笑我沒長假,我笑他人沒事幹!

本人不善於jquery,也不善於p+css的排版,今天把vs2008打瞭個補丁,然後摸索瞭2個多小時做完這個例子和博客,手都敲軟瞭,在這裡和大傢分享學習下!

p彈出層,我沒有點擊事件,是頁面一加載就彈出來,你也可以改成$("#id").click(function(){});放這裡面就可以點擊某個id事件來彈出層瞭,上預覽圖:

頁面加載完成時:

當驗證碼得到焦點時:

實現這個ajax為瞭節約時間,用戶名/密碼/驗證碼我都沒判斷是否為空,我也沒用數據庫,登錄用戶名和密碼都是admin

登錄成功時:

這裡說明一下,由於時間有限,你可以把這個登錄成功或者登錄失敗,效果做一下,直接在登錄窗口上放一個<p id="message"><p>然後設置其樣式,把提示內容追加上去,根據自己個人需求來,下面貼我的全部代碼:

靜態頁面login.html代碼如下圖所示

 

 

 

login.html

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 2 <html xmlns="http://www.w3.org/1999/xhtml">

 3 <head>

 4     <title>mydream_後臺登錄</title>

 5     <link href="css/login.css" rel="stylesheet" type="text/css" />

 6     <script src="../js/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

 7     <script src="js/login.js" type="text/javascript"></script>

 8 </head>

 9 <body>

10 <p id="login" class="login">

11 <p class="title"><b>管理員登錄</b></p>

12 <p class="pad">

13 <p><p class="selectinput loginpsw"><label>用戶名:</label><input type="text" tabindex="1" class="txt" size="36" name="username" id="txtName" /></p></p>

14 <p><p class="selectinput loginpsw"><label>密&nbsp;&nbsp;&nbsp;碼:</label><input type="password" tabindex="1" class="txt" size="36" name="password" id="txtPassword" /></p></p>

15 <p><p><p class="selectinput loginpsw"><label>驗證碼:</label><input type="text" tabindex="1" class="txt" size="36" name="code" id="txtCode"/></p></p></p>

16 <p><input id="btnLogin" type="button" value="登   錄" /></p>

17 </p>

18 <p class="pCode"><img alt="驗證碼" title="點擊刷新驗證碼" src="../ashx/verifyCode.ashx" /></p>

19 </p>                    

20 </body>

21 </html>

login.html層疊樣式表login.css代碼如下所示:

 

login.css

 1 .selectinput{margin-bottom:10px;width:224px;height:20px;background-color:#FFF;border:1px solid;border-color:#999 #CCC #CCC #999;}

 2 .selectinput .txt{float:left;width:165px;border:none;}

 3 .loginpsw label{float:left;display:inline;margin:0 0 0 4px;width:50px;height:auto;line-height:150%; color:#339900}

 4 body,td,input,textarea,select,button{color:#666;font:12px/1.6em Verdana,Helvetica,Arial,sans-serif;}

 5 input,select,button{vertical-align:middle;}

 6 .txt,.txtarea{padding:2px;*padding:0 2px;height:16px;*height:20px;border:1px solid;border-color:#999 #CCC #CCC #999;background:#FFF;}

 7 body{ margin:0 auto;}

 8 .login{border:solid 3px #339900; width:360px; height:223px;display:none; z-index:101;position:absolute; background-color:#FFFFFF;}

 9 .login .title{width:100%;height:30px;line-height:30px; border-bottom:solid 1px #339900;}

10 .login .title b{ padding-left:5px; color:#000000;}

11 .login .pad{padding-left:35px;}

12 .login .pCode{width:80px; height:30px;position:relative;top: -32px;left:170px; display:none;}

13 .login #btnLogin{width:55px; height:28px;}

14 #greybackground{background:#000000;width:100%; display:block; z-index:100; top:0px; left:0px; position:absolute;}

login.html頁面所需js文件login.js代碼如下所示:

 

login.js

 1 /// <reference path="http://www.cnblogs.com/js/jquery-1.4.1-vsdoc.js" />

 2 $(document).ready(function() {

 3     var screenwidth, screenheight, mytop, getPosLeft, getPosTop

 4     screenwidth = $(window).width();

 5     screenheight = $(window).height();

 6     //獲取滾動條距頂部的偏移

 7     mytop = $(document).scrollTop();

 8     //計算彈出層的left

 9     getPosLeft = screenwidth / 2 – 200;

10     //計算彈出層的top

11     getPosTop = screenheight / 2 – 150;

12     //css定位彈出層

13     $("#login").css({ "left": getPosLeft, "top": getPosTop });

14     //當瀏覽器窗口大小改變時

15     $(window).resize(function() {

16         screenwidth = $(window).width();

17         screenheight = $(window).height();

18         mytop = $(document).scrollTop();

19         getPosLeft = screenwidth / 2 – 200;

20         getPosTop = screenheight / 2 – 150;

21         $("#login").css({ "left": getPosLeft, "top": getPosTop + mytop });

22     });

23     //當拉動滾動條時,彈出層跟著移動

24     $(window).scroll(function() {

25         screenwidth = $(window).width();

26         screenheight = $(window).height();

27         mytop = $(document).scrollTop();

28         getPosLeft = screenwidth / 2 – 200;

29         getPosTop = screenheight / 2 – 150;

30         $("#login").css({ "left": getPosLeft, "top": getPosTop + mytop });

31     });

32     //失去焦點與得到焦點

33     $("#txtCode").focus(function() {

34         $(".pCode").fadeIn(1200);

35     });

36     $("#txtCode").blur(function() {

37         $(".pCode").fadeOut();

38     });

39     $("#login").fadeIn("slow"); //toggle("slow");

40     //獲取頁面文檔的高度

41     var docheight = $(document).height();

42     //追加一個層,使背景變灰

43     $("body").append("<p id='greybackground'></p>");

44     $("#greybackground").css({ "opacity": "0.1", "height": docheight });

45     //登錄

46     $("#btnLogin").click(function() {

47         $.get("../ashx/login.ashx",

48          { name: $("#txtName").val(),

49              pwd: encodeURIComponent($("#txtPassword").val()),

50              code: $("#txtCode").val()

51          },

52          function(data) {

53              switch (data) {

54                  case "code error":

55                      alert("驗證碼錯誤!");

56                      break;

57                  case "success":

58                      alert("登錄成功!");

59                      break;

60                  case "false":

61                      alert("登錄失敗!");

62                      break;

63                  default:

64                      alert("數據加載失敗,請稍後再試!");

65                      break;

66              }

67          });

68     });

69 });

login.html交互的後臺cs文件login.ashx代碼如下所示:

 

login.ashx

 1 <%@ WebHandler Language="C#" Class="login" %>

 2

 3 using System;

 4 using System.Web;

 5 using System.Web.SessionState;

 6

 7 public class login : IHttpHandler, IRequiresSessionState

 8 {

 9     public void ProcessRequest(HttpContext context)

10     {

11         string code = context.Request.QueryString["code"];

12         context.Response.ContentType = "text/plain";

13         if (code.ToLower() != context.Session["checkCode"].ToString())

14         {

15             context.Response.Write("code error");

16         }

17         else

18         {

19             string name = context.Request.QueryString["name"];

20             string pwd = HttpUtility.UrlDecode(context.Request.QueryString["pwd"]);

21             if (name == "admin" && pwd == "admin")

22             {

23                 context.Response.Write("success");

24             }

25             else

26             {

27                 context.Response.Write("false");

28             }

29         }

30     }

31

32     public bool IsReusable

33     {

34         get

35         {

36             return false;

37         }

38     }

39

40 }

login.html頁面驗證碼文件verifyCode.ashx代碼如下所示:

 

verifyCode

  1 <%@ WebHandler Language="C#" Class="verifyCode" %>

  2

  3 using System;

  4 using System.Web;

  5 using System.Web.SessionState;//第一步導入命名空間

  6 using System.Drawing;

  7

  8 public class VerifyCode : IHttpHandler, IRequiresSessionState

  9 {//第二步實現接口 就和平常一樣可以使用session

 10

 11     public void ProcessRequest(HttpContext context)

 12     {

 13         string checkCode = this.CreateRandomCode(4).ToLower();

 14         context.Session["checkCode"] = checkCode;

 15         this.CreateImage(context, checkCode);

 16     }

 17

 18     public bool IsReusable

 19     {

 20         get

 21         {

 22             return false;

 23         }

 24     }

 25

 26     /// <summary>

 27     /// 按位生成隨機

 28     /// </summary>

 29     /// <param name="codeCount"></param>

 30     /// <returns></returns>

 31     private string CreateRandomCode(int codeCount)

 32     {

 33         int number;

 34         string checkCode = String.Empty;

 35         Random random = new Random();

 36         for (int i = 0; i < codeCount; i++)

 37         {

 38             number = random.Next(100);

 39             switch (number % 3)

 40             {

 41                 case 0:

 42                     checkCode += ((char)('0' + (char)(number % 10))).ToString();

 43                     break;

 44                 case 1:

 45                     checkCode += ((char)('a' + (char)(number % 26))).ToString();

 46                     break;

 47                 case 2:

 48                     checkCode += ((char)('A' + (char)(number % 26))).ToString();

 49                     break;

 50                 default:

 51                     break;

 52             }

 53         }

 54         return checkCode;

 55     }

 56

 57     /// <summary>

 58     /// 根據字符生成圖片

 59     /// </summary>

 60     /// <param name="context"></param>

 61     /// <param name="checkCode"></param>

 62     private void CreateImage(HttpContext context,string checkCode)

 63     {

 64         int randAngle = 45;//隨機轉動角度

 65         int iwidth = (int)(checkCode.Length * 23);

 66         //封裝GDI+ 位圖,此位圖由圖形圖像及其屬性的像素數據組成,指定的寬度和高度。以像素為單位

 67         System.Drawing.Bitmap image = new System.Drawing.Bitmap(iwidth, 28);

 68

 69         //封裝一個 GDI+繪圖圖面。無法繼承此類。從指定的Image創建新的Graphics

 70         Graphics g = Graphics.FromImage(image);

 71

 72         //清除整個繪圖面並以指定背景填充

 73         g.Clear(Color.AliceBlue);

 74

 75         //畫一個邊框

 76         g.DrawRectangle(new Pen(Color.Black, 0), 0, 0, image.Width – 1, image.Height – 1);

 77

 78         //定義繪制直線和曲線的對象。(隻是Pen的顏色,指示此Pen的寬度的值)

 79         Pen blackPen = new Pen(Color.LightGray, 0);

 80

 81         Random rand = new Random();

 82

 83         //劃橫線的條數 可以根據自己的要求     

 84

 85         for (int i = 0; i < 50; i++)

 86         {

 87             //隨機高度

 88             //int y = rand.Next(image.Height);

 89             /*繪制一條連線由坐標對指定的兩個點的線條

 90              線條顏色、寬度和樣式,第一個點的x坐標和y坐標,第二個點的x坐標和y坐標*/

 91             //g.DrawLine(blackPen, 0, y, image.Width, y);

 92             int x = rand.Next(0, image.Width);

 93             int y = rand.Next(0, image.Height);

 94             //畫矩形,坐標(x,y)寬高(1,1)

 95             g.DrawRectangle(blackPen, x, y, 1, 1);

 96         }

 97

 98         //拆散字符串成單個字符數組

 99         char[] chars = checkCode.ToCharArray();

100

101         //文字居中

102         StringFormat format = new StringFormat(StringFormatFlags.NoClip);

103         format.Alignment = StringAlignment.Center;

104         format.LineAlignment = StringAlignment.Center;

105

106         //定義顏色

107         Color[] c = { Color.Black, Color.DarkGray, Color.DarkOrange, Color.Red, Color.DarkBlue, Color.Green, Color.Orange, Color.Brown, Color.DarkCyan, Color.Purple };

108         //定義字體

109         string[] font = { "Verdana", "Microsoft Sans Serif", "Comic Sans MS", "Arial", "宋體", "Arial Baltic" };

110

111         for (int i = 0; i < chars.Length; i++)

112         {

113             int cindex = rand.Next(c.Length);

114             int findex = rand.Next(font.Length);

115

116             //font 封裝在特定設備上呈現特定字體所需的紋理和資源(字體,大小,字體樣式)

117             Font f = new System.Drawing.Font(font[findex], 16, System.Drawing.FontStyle.Bold);

118

119             /*Brush定義用於填充圖形圖像(如矩形、橢圓、圓形、多邊形和封閉路徑)的內部對象

120             SolidBrush(Color.White)初始化指定的顏色 指定畫筆顏色為白色*/

121             Brush b = new System.Drawing.SolidBrush(c[cindex]);

122

123             Point dot = new Point(16, 16);

124

125             //轉動的度數

126             float angle = rand.Next(-randAngle, randAngle);

127

128             //移動光標到指定位置

129             g.TranslateTransform(dot.X, dot.Y);

130             g.RotateTransform(angle);

131             /*在指定的位置並且用指定的Brush和Font對象繪制指定的文本字符串

132            (指定的字符串,字符串的文本格式,繪制文本顏色和紋理,所繪制文本的左上角的x坐標,坐標)*/

133             g.DrawString(chars[i].ToString(), f, b, 1, 1, format);

134             //轉回去

135             g.RotateTransform(-angle);

136             //移動光標指定位置

137             g.TranslateTransform(2, -dot.Y);

138         }

139         //創建存儲區為內存流

140         System.IO.MemoryStream ms = new System.IO.MemoryStream();

141

142         //將此圖像以指定的格式保存到指定的流中(將其保存在內存流中,圖像的格式)

143         image.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);

144

145         //清除緩沖區將流中的內容輸出

146         context.Response.ClearContent();

147

148         //獲取輸出流的類型

149         context.Response.ContentType = "image/Jpeg";

150

151         //將二進制字符串寫入HTTP輸出流

152         context.Response.BinaryWrite(ms.ToArray());

153

154         g.Dispose();

155

156         image.Dispose();

157     }

158 }有瞭以上文件,就可以做你想要的談出p層效果瞭,我js不是很擅長,有好的意見歡迎拍磚,不要噴,謝謝!

 

下載地址,點擊這裡

版權所有,轉載請註明出處!http://www.cnblogs.com/cmsdn/archive/2011/10/03/2198598.html

一切偉大的行動和思想,都有一個微不足道的開始。微不足道的我,正在吸取知識的土壤,希望能取得成功!不嫌棄我微不足道的,願交天下好友!

 

發佈留言