html+ajax登陆,jQuery+Ajax模拟用户登录功能的实现代码

摘要 腾兴网为您分享:jQuery+Ajax模拟用户登录功能的实现代码，钻石星球，篆刻字典，中信金通，易码平台等软件知识，以及电视猫app，河南app，红豆婚恋，xvideos本，电子电路，qq约会，铜川电视台,稀有精英插件，旗帜软件，团购活动策划方案，地铁通，最终幻想13，抚顺市住房公积金管理中心，银行客户经理述职报告，逆水寒科举答题器等软件it资讯，欢迎关注腾兴网。效果图如下所示： 大致流程： 1)、当用户点击页面右上角的登录链接时，弹出br模拟窗口，该窗口通过iframe调用Login.aspx页面，用户输入用户名、密码和验证码后，Login.aspx页面的jquer...

效果图如下所示：

大致流程：

1)、当用户点击页面右上角的登录链接时，弹出br模拟窗口，该窗口通过iframe调用Login.aspx页面，用户输入用户名、密码和验证码后，Login.aspx页面的jquery代码post到Login.ashx页面处理。

当然，使用LoginProcess.aspx 也是可以的。

2)、Login.ashx页面处理完把结果返回给Login.aspx页面处理，result变量用与接收结果。

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

1、主页面调用代码片段：

复制代码 代码示例:

登录

$('#').click(

function(){

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

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

} );

2、Login.aspx代码：

复制代码 代码示例:

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

3、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;

}

}

相关推荐