• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

asp.netjQueryAjax用户登录功能的实现

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
<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> 
代码

<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" /> 
<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> 

 

主页面调用代码片段:
复制代码 代码如下:
<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 /></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



 

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap