Heim  >  Artikel  >  Backend-Entwicklung  >  Implementierung der Benutzeranmeldefunktion von asp.net jQuery Ajax

Implementierung der Benutzeranmeldefunktion von asp.net jQuery Ajax

高洛峰
高洛峰Original
2017-01-12 13:58:051617Durchsuche

Code-Snippet für den Hauptseitenaufruf:

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

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>

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>

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; 
} 
} 
} 
}

Weitere Artikel zur Implementierung der Benutzeranmeldefunktion von asp.net jQuery Ajax finden Sie auf der chinesischen PHP-Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn