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

9c1652a5481ae48df63a567e540fb5cf.png

20091126014207728.png

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

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

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

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

主页面调用代码片段:

登录

$('#').click(

function(){

jBox.open('iframe-jBoxID','iframe','Login.aspx','用户登录

','width=400,height=250,center=true,draggable=true,model=true');

} );

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代码:

$(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;

}

}

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;

}

}

}

}

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐