jQuery-Ajax用户登录功能的实现

 

前几天把jbox源码修改成仿QQ空间模拟窗口后发现有很多人在关注。今天就贴一下我利用该模拟窗口实现的用户登录功能的代码。

ok，先来贴几张张效果图。

 

其中大致流程是用户点击页面右上角的登录链接接着弹出div模拟窗口，该窗口通过iframe调用Login.aspx页面，用户输入用户名

密码和验证码后，Login.aspx页面的jQuery代码post到Login.ashx页面处理，Login.ashx页面可以算是简易的aspx页面吧。

当然你用LoginProcess.aspx 也是可以的。Login.ashx页面处理完把结果返回给Login.aspx页面处理，result变量用与接收结果。

如果返回1表示登录成功，则关闭模拟窗口。

主页面调用代码片段：

 

Code
1<asp:HyperLink ID="lnkLogin" runat="server" NavigateUrl="#" >登录</asp:HyperLink>
2
3<script language="javascript" type="text/javascript">
4$('#<%=this.lnkLogin.ClientID %>').click(
5                function(){
6                   jBox.open('iframe-jBoxID','iframe','Login.aspx','用户登录
7','width=400,height=250,center=true,draggable=true,model=true');             
8   } );
9</script>

 

Login.aspx代码：

 

Code
 1<form id="form1" onsubmit="return false;">
 2<table id="login-table">            
 3    <tr>
 4        <td width="60">学号：</td>
 5        <td><input class="textbox" type="text" style="width:160px;" id="txtUserName"
 6 maxlength="9"  onblur="checkUserName()" onclick="$.trim(this.value)"/><span></span>
 7        </td>
 8    </tr>
 9    <tr>
10        <td width="60">密码：</td>
11        <td><input class="textbox" type="password"  style="width:160px;"  id="txtUserPwd"
  onblur="checkUserPwd()" onclick="$.trim(this.value)" /><span></span>
12        </td>
13        </tr>
14       <tr>
15        <td width="60">验证码：</td>
16        <td><input class="textbox" type="text"  style="width:160px;"  maxlength="5"
17  id="txtCheckCode"  onblur="checkCheckCode()" onclick="$.trim(this.value)"/><span>
18</span>
19        </td>
20        </tr>
21     <tr>
22        <td width="60"></td>
23        <td><div style="color:#808080;">输入下图中的字符，不区分大小写</div><br />
24        <img src="CheckCode.aspx"  style="vertical-align:middle;" alt="验证码" id="imgCheckCode" />
25        <a href="#" id="change_image">看不清，换一张</a></td>
26    </tr>
27    <tr>
28        <td width="60"></td>        
29        <td><input type="image" src="App_Themes/Images/btn_login.jpg" id="btnLogin" 
30alt="马上登录" style="border:0;"/></td>        
31    </tr>
32</table>
33</form>

 

 jQuery代码： 

 

Code
 1<script language="javascript" type="text/javascript" >
 2$(document).ready(function(){
 3        // 验证码更新
 4       $('#change_image').click(
 5                function(){                    
 6                    $('#imgCheckCode').attr('src','CheckCode.aspx?'+Math.random());
 7       });
 8       //关键的代码
 9     $("#btnLogin").click(function(){
10            if(checkUserName() && checkUserPwd() && checkCheckCode())
11            {
12                   var data = {
13                        UserName:  $('#txtUserName').val(),
14                        UserPwd:   $('#txtUserPwd').val(),
15                        CheckCode: $('#txtCheckCode').val()
16                    };
17                  //提交数据给Login.ashx页面处理
18                 $.post("Ajax/Login.ashx",data,function(result){
19                    if(result == "1")   //登录成功
20                    {
21                        alert("登录成功！您可以进行其他操作了！");
22                         // 关闭模拟窗口
23                        window.parent.window.jBox.close(); 
24                    }
25                    else if(result == "2")   //验证码错误
26                    {
27                         $('#txtCheckCode').next("span").css("color","red").text("*
28验证码错误");
29                    }
30                    else
31                    {
32                        alert("登录失败！请重试");
33                    }
34                });
35            }
36            else
37            {
38                checkUserName();
39                checkUserPwd();
40                checkCheckCode();
41            }
42    });
43});     
44
45    //check the userName
46    function checkUserName()
47    {
48        if($("#txtUserName").val().length == 0)
49        {
50           $("#txtUserName").next("span").css("color","red").text("*用户名不为空");
51           return false;
52        }
53        else
54        {
55            var reg = /^\d{9}$/;
56            if(!reg.test($('#txtUserName').val()))
57            {
58                $('#txtUserName').next("span").css("color","red").text("*正确的格式
59如：030602888");
60                return false;
61            }
62            else
63            {
64                  $("#txtUserName").next("span").css("color","red").text("");
65                  return true;
66            }
67        }
68    }
69    //check the pwd
70    function checkUserPwd()
71    {
72        if($('#txtUserPwd').val().length == 0)
73        {
74           $('#txtUserPwd').next("span").css("color","red").text("*密码不为空");
75           return false;
76        }
77        else
78        {
79            $('#txtUserPwd').next("span").css("color","red").text("");
80            return true;
81        }
82    }
83    // check the check code
84    function checkCheckCode()
85    {
86        if($('#txtCheckCode').val().length == 0)
87        {
88           $('#txtCheckCode').next("span").css("color","red").text("*验证码不为空");
89           return false;
90        }
91        else
92        {
93            $('#txtCheckCode').next("span").css("color","red").text("");
94            return true;
95        }
96    }
97</script>

 

Login.ashx代码：

 

Code
 1using System;
 2using System.Collections;
 3using System.Data;
 4using System.Linq;
 5using System.Web;
 6using System.Web.Services;
 7using System.Web.Services.Protocols;
 8using System.Xml.Linq;
 9using System.Data.SqlClient;
10using System.Web.SessionState; //支持session必须的引用
11
12namespace Website.Ajax
13{
14    [WebService(Namespace = "http://tempuri.org/")]
15    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
16    public class Login : IHttpHandler,IRequiresSessionState
17    {
18        public void ProcessRequest(HttpContext context)
19        {
20            context.Response.ContentType = "text/plain";
21            string checkCode = "";
22            if (context.Session["checkCode"] != null)
23            {
24                checkCode =         Convert.ToString(context.Session["checkCode"]).ToLower();
25            }
26            if (context.Request.Form["CheckCode"].ToLower() == checkCode)
27            {
28                using (SqlConnection conn = new 
29SqlConnection(SqlHelper.StudentConnectionString))
30                {
31                    string sql = "select ID,stuNumber,userPassword,realName from 
32t_stuUser where stuNumber=@UserName and userPassword=@UserPwd";
33                    SqlCommand cmd = new SqlCommand(sql, conn);
34                    SqlParameter pUserName = cmd.Parameters.Add("@UserName", 
35SqlDbType.VarChar, 30);
36                    SqlParameter pUserPwd = cmd.Parameters.Add("@UserPwd", 
37SqlDbType.VarChar, 150);
38                    pUserName.Value = context.Request.Form["UserName"];
39                    pUserPwd.Value = Common.MD5(context.Request.Form["UserPwd"]);
40                    conn.Open();
41                    SqlDataReader sdr = 
42cmd.ExecuteReader(CommandBehavior.CloseConnection);
43                    if (sdr.Read())
44                    {
45                        context.Session["UserID"] = Convert.ToString(sdr["ID"]);
46                        context.Session["StuName"] = 
47Convert.ToString(sdr["realName"]);
48                        context.Session["StuNumber"] = 
49Convert.ToString(sdr["stuNumber"]);
50                        context.Response.Write("1");    // 登录成功
51                    }
52                    else
53                    {
54                        context.Response.Write("0"); //登录失败，用户名或密码错误
55                    }
56                }
57            }
58            else
59            {
60                context.Response.Write("2");   // 验证码错误
61            }
62        }
63
64        public bool IsReusable
65        {
66            get
67            {
68                return false;
69            }
70        }
71    }
72}
73

 

欢迎转载，请注明出处