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

来源:爱站网时间:2020-04-27编辑:网友分享
登录界面是信息系统提供的必要功能,是为用户提供维护信息的界面,接下来爱站技术频道将引导我们使用jQuery+Ajax用户登录功能的实现详解,希望大家能在下文中学习到想要学习的知识。

登录界面是信息系统提供的必要功能,是为用户提供维护信息的界面,接下来爱站技术频道将引导我们使用jQuery+Ajax用户登录功能的实现详解,希望大家能在下文中学习到想要学习的知识。
 

 

其中大致流程是用户点击页面右上角的登录链接接着弹出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;
}
}
}
}

看了上面爱站技术频道小编介绍的jQuery+Ajax用户登录功能的实现方法,是不是对这方面有所了解了呢?想了解更多有关技术信息,请多关注js.aizhan.com吧!

上一篇:手动把asp.net的类生成dll文件的方法

下一篇:ASP.NET 统计图表控件小结

您可能感兴趣的文章

相关阅读

热门软件源码

最新软件源码下载