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

 更新时间:2009年11月26日 01:42:08   作者:   我要评论
前几天把jbox源码修改成仿QQ空间模拟窗口后发现有很多人在关注。今天就贴一下我利用该模拟窗口实现的用户登录功能的代码。

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


 

 

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

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

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

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

主页面调用代码片段:

复制代码 代码如下:

<asp:HyperLink ID="lnkLogin" runat="server" NavigateUrl="#" >登录</asp:HyperLink>

<script language="javascript" type="text/javascript">
$('#<%=this.lnkLogin.ClientID %>').click(
function(){
jBox.open('iframe-jBoxID','iframe','Login.aspx','用户登录
','width=400,height=250,center=true,draggable=true,model=true');
} );
</script>

Login.aspx代码:
复制代码 代码如下:

<form id="form1" onsubmit="return false;">
<table id="login-table">
<tr>
<td width="60">学号:</td>
<td><input class="textbox" type="text" style="width:160px;" id="txtUserName"
maxlength="9" onblur="checkUserName()" onclick="$.trim(this.value)"/><span></span>
</td>
</tr>
<tr>
<td width="60">密码:</td>
<td><input class="textbox" type="password" style="width:160px;" id="txtUserPwd"
onblur="checkUserPwd()" onclick="$.trim(this.value)" /><span></span>
</td>
</tr>
<tr>
<td width="60">验证码:</td>
<td><input class="textbox" type="text" style="width:160px;" maxlength="5"
id="txtCheckCode" onblur="checkCheckCode()" onclick="$.trim(this.value)"/><span>
</span>
</td>
</tr>
<tr>
<td width="60"></td>
<td><div style="color:#808080;">输入下图中的字符,不区分大小写</div><br />
<img src="CheckCode.aspx" style="vertical-align:middle;" alt="验证码" id="imgCheckCode" />
<a href="#" id="change_image">看不清,换一张</a></td>
</tr>
<tr>
<td width="60"></td>
<td><input type="image" src="App_Themes/Images/btn_login.jpg" id="btnLogin"
alt="马上登录" style="border:0;"/></td>
</tr>
</table>
</form>

jQuery代码:
复制代码 代码如下:

<script language="javascript" type="text/javascript" >
$(document).ready(function(){
// 验证码更新
$('#change_image').click(
function(){
$('#imgCheckCode').attr('src','CheckCode.aspx?'+Math.random());
});
//关键的代码
$("#btnLogin").click(function(){
if(checkUserName() && checkUserPwd() && checkCheckCode())
{
var data = {
UserName: $('#txtUserName').val(),
UserPwd: $('#txtUserPwd').val(),
CheckCode: $('#txtCheckCode').val()
};
//提交数据给Login.ashx页面处理
$.post("Ajax/Login.ashx",data,function(result){
if(result == "1") //登录成功
{
alert("登录成功!您可以进行其他操作了!");
// 关闭模拟窗口
window.parent.window.jBox.close();
}
else if(result == "2") //验证码错误
{
$('#txtCheckCode').next("span").css("color","red").text("*
验证码错误");
}
else
{
alert("登录失败!请重试");
}
});
}
else
{
checkUserName();
checkUserPwd();
checkCheckCode();
}
});
});

//check the userName
function checkUserName()
{
if($("#txtUserName").val().length == 0)
{
$("#txtUserName").next("span").css("color","red").text("*用户名不为空");
return false;
}
else
{
var reg = /^\d{9}$/;
if(!reg.test($('#txtUserName').val()))
{
$('#txtUserName').next("span").css("color","red").text("*正确的格式
如:030602888");
return false;
}
else
{
$("#txtUserName").next("span").css("color","red").text("");
return true;
}
}
}
//check the pwd
function checkUserPwd()
{
if($('#txtUserPwd').val().length == 0)
{
$('#txtUserPwd').next("span").css("color","red").text("*密码不为空");
return false;
}
else
{
$('#txtUserPwd').next("span").css("color","red").text("");
return true;
}
}
// check the check code
function checkCheckCode()
{
if($('#txtCheckCode').val().length == 0)
{
$('#txtCheckCode').next("span").css("color","red").text("*验证码不为空");
return false;
}
else
{
$('#txtCheckCode').next("span").css("color","red").text("");
return true;
}
}
</script>

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;
}
}
}
}

相关文章

  • asp.net(C#) 动态添加非ASP的标准html控件(如添加Script标签)

    asp.net(C#) 动态添加非ASP的标准html控件(如添加Script标签)

    在开发程序时,有时需要动态添加标签,而有部分又不是ASP控件,偶然找到这段代码,特收藏。
    2009-07-07
  • 详解ASP.NET Core WebApi 返回统一格式参数

    详解ASP.NET Core WebApi 返回统一格式参数

    这篇文章主要介绍了详解ASP.NET Core WebApi 返回统一格式参数,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 如何合并多个 .NET 程序集

    如何合并多个 .NET 程序集

    这篇文章主要介绍了如何合并多个 .NET 程序集的方法,大家可能都听说过项 ILMerge, SmartAssembly, 等这样的工具.但是我想如果我们就能通过在编译时将所有这些源代码文件导入一个项目,来获得这些东西的一个完美组合.下面我们就来仔细探讨下。
    2015-03-03
  • MVC异常处理详解

    MVC异常处理详解

    这篇文章主要为大家详细介绍了MVC异常处理的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • C#反射技术的简单操作(读取和设置类的属性)

    C#反射技术的简单操作(读取和设置类的属性)

    反射的作用想必大家都知道了吧,少量属性的自动化操作手动添加几下当然是没有问题的,但是属性数量较多的时候敲起这些繁锁的代码可以困了,再说对扩展和维护性造成很多的不遍,以下代码中如不能直接使用请添加using System.Text;的引用。
    2011-01-01
  • Asp.net中DataTable导出到Excel的方法介绍

    Asp.net中DataTable导出到Excel的方法介绍

    本篇文章介绍了,Asp.net中DataTable导出到Excel的方法。需要的朋友参考下
    2013-05-05
  • asp.net文件上传示例分享

    asp.net文件上传示例分享

    ASP.NET依托.net framework类库,封装了大量的功能,使得上传文件非常简单,主要有以下三种基本方法,需要的朋友可以参考下
    2014-02-02
  • .NET开发基础:从简单的例子理解泛型 分享

    .NET开发基础:从简单的例子理解泛型 分享

    .Net开发基础系列文章,对自己之前写过的代码备忘,如能给人予帮助,不甚荣幸。个人能力有限,如有差错或不足,请及时指正。
    2013-06-06
  • asp.net webservice返回json的方法

    asp.net webservice返回json的方法

    webservice默认的返回为XML 要返回json可以用json工具类把对象转为json字符串,需要的朋友可以参考下
    2014-02-02
  • .NET中RDLC循环处理数据的应用分析

    .NET中RDLC循环处理数据的应用分析

    本篇文章介绍了,.NET中RDLC循环处理数据的应用分析。需要的朋友参考下
    2013-05-05

最新评论