asp.net jQuery Ajax用户登录功能的实现
程序员文章站
2024-03-08 20:39:10
主页面调用代码片段: 复制代码 代码如下:
主页面调用代码片段:
<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: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;
}
}
}
}
上一篇: 原来Java中有两个ArrayList
下一篇: Java方法参数是引用调用还是值调用?
推荐阅读
-
asp.net jQuery Ajax用户登录功能的实现
-
jQuery+Ajax用户登录功能的实现
-
jQuery AJax调用asp.net webservers的实现代码
-
ASP.NET中实现jQuery Validation-Engine的Ajax验证实现代码
-
ASP.NET中实现jQuery Validation-Engine的Ajax验证
-
ASP.NET中实现jQuery Validation-Engine的Ajax验证
-
Java+Ajax实现的用户名重复检验功能实例详解
-
基于asp.net下使用jquery实现ajax的解决方法
-
asp.net+jquery ajax无刷新登录的实现方法
-
Java+Ajax实现的用户名重复检验功能实例详解