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

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

 

 

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

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

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

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

主页面调用代码片段：

复制代码 代码如下:

登录

Login.aspx代码：

复制代码 代码如下:

学号：	maxlength="9" onblur="checkUserName()" onclick="$.trim(this.value)"/>
密码：	onblur="checkUserPwd()" onclick="$.trim(this.value)" />
验证码：	id="txtCheckCode" onblur="checkCheckCode()" onclick="$.trim(this.value)"/>
	输入下图中的字符，不区分大小写 看不清，换一张
	alt="马上登录" style="border:0;"/>

jQuery代码：

复制代码 代码如下:

Login.ashx代码：

复制代码 代码如下:

using System;
using System.Collections;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.Data.SqlClient;
using System.Web.SessionState; //支持session必须的引用

namespace Website.Ajax
{
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class Login : IHttpHandler,IRequiresSessionState
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string checkCode = "";
if (context.Session["checkCode"] != null)
{
checkCode = Convert.ToString(context.Session["checkCode"]).ToLower();
}
if (context.Request.Form["CheckCode"].ToLower() == checkCode)
{
using (SqlConnection conn = new
SqlConnection(SqlHelper.StudentConnectionString))
{
string sql = "select ID,stuNumber,userPassword,realName from
t_stuUser where stuNumber=@UserName and userPassword=@UserPwd";
SqlCommand cmd = new SqlCommand(sql, conn);
SqlParameter pUserName = cmd.Parameters.Add("@UserName",
SqlDbType.VarChar, 30);
SqlParameter pUserPwd = cmd.Parameters.Add("@UserPwd",
SqlDbType.VarChar, 150);
pUserName.Value = context.Request.Form["UserName"];
pUserPwd.Value = Common.MD5(context.Request.Form["UserPwd"]);
conn.Open();
SqlDataReader sdr =
cmd.ExecuteReader(CommandBehavior.CloseConnection);
if (sdr.Read())
{
context.Session["UserID"] = Convert.ToString(sdr["ID"]);
context.Session["StuName"] =
Convert.ToString(sdr["realName"]);
context.Session["StuNumber"] =
Convert.ToString(sdr["stuNumber"]);
context.Response.Write("1"); // 登录成功
}
else
{
context.Response.Write("0"); //登录失败，用户名或密码错误
}
}
}
else
{
context.Response.Write("2"); // 验证码错误
}
}

public bool IsReusable
{
get
{
return false;
}
}
}
}