Implementation of asp.net jQuery Ajax user login function

高洛峰
Release: 2017-01-12 13:58:05
Original
1628 people have browsed it

Main page calling code snippet:

<asp:HyperLink ID="lnkLogin" runat="server" NavigateUrl="#" >登录</asp:HyperLink> 
<script language="javascript" type="text/javascript"> 
$(&#39;#<%=this.lnkLogin.ClientID %>&#39;).click( 
function(){ 
jBox.open(&#39;iframe-jBoxID&#39;,&#39;iframe&#39;,&#39;Login.aspx&#39;,&#39;用户登录 
&#39;,&#39;width=400,height=250,center=true,draggable=true,model=true&#39;); 
} ); 
</script>
Copy after login

Login.aspx code:

<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>
Copy after login

jQuery code:

<script language="javascript" type="text/javascript" > 
$(document).ready(function(){ 
// 验证码更新 
$(&#39;#change_image&#39;).click( 
function(){ 
$(&#39;#imgCheckCode&#39;).attr(&#39;src&#39;,&#39;CheckCode.aspx?&#39;+Math.random()); 
}); 
//关键的代码 
$("#btnLogin").click(function(){ 
if(checkUserName() && checkUserPwd() && checkCheckCode()) 
{ 
var data = { 
UserName: $(&#39;#txtUserName&#39;).val(), 
UserPwd: $(&#39;#txtUserPwd&#39;).val(), 
CheckCode: $(&#39;#txtCheckCode&#39;).val() 
}; 
//提交数据给Login.ashx页面处理 
$.post("Ajax/Login.ashx",data,function(result){ 
if(result == "1") //登录成功 
{ 
alert("登录成功!您可以进行其他操作了!"); 
// 关闭模拟窗口 
window.parent.window.jBox.close(); 
} 
else if(result == "2") //验证码错误 
{ 
$(&#39;#txtCheckCode&#39;).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($(&#39;#txtUserName&#39;).val())) 
{ 
$(&#39;#txtUserName&#39;).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($(&#39;#txtUserPwd&#39;).val().length == 0) 
{ 
$(&#39;#txtUserPwd&#39;).next("span").css("color","red").text("*密码不为空"); 
return false; 
} 
else 
{ 
$(&#39;#txtUserPwd&#39;).next("span").css("color","red").text(""); 
return true; 
} 
} 
// check the check code 
function checkCheckCode() 
{ 
if($(&#39;#txtCheckCode&#39;).val().length == 0) 
{ 
$(&#39;#txtCheckCode&#39;).next("span").css("color","red").text("*验证码不为空"); 
return false; 
} 
else 
{ 
$(&#39;#txtCheckCode&#39;).next("span").css("color","red").text(""); 
return true; 
} 
} 
</script>
Copy after login

Login.ashx code:

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; 
} 
} 
} 
}
Copy after login

For more articles related to the implementation of asp.net jQuery Ajax user login function, please pay attention to the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template