asp.net jQuery Ajax用戶登錄功能的實(shí)現(xiàn)
更新時(shí)間:2009年11月11日 00:43:35 作者:
前幾天把jbox源碼修改成仿QQ空間模擬窗口后發(fā)現(xiàn)有很多人在關(guān)注。今天就貼一下我利用該模擬窗口實(shí)現(xiàn)的用戶登錄功能的代碼。
主頁面調(diào)用代碼片段:
<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">學(xué)號(hào):</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">驗(yàn)證碼:</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;">輸入下圖中的字符,不區(qū)分大小寫</div><br />
<img src="CheckCode.aspx" style="vertical-align:middle;" alt="驗(yàn)證碼" 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(){
// 驗(yàn)證碼更新
$('#change_image').click(
function(){
$('#imgCheckCode').attr('src','CheckCode.aspx?'+Math.random());
});
//關(guān)鍵的代碼
$("#btnLogin").click(function(){
if(checkUserName() && checkUserPwd() && checkCheckCode())
{
var data = {
UserName: $('#txtUserName').val(),
UserPwd: $('#txtUserPwd').val(),
CheckCode: $('#txtCheckCode').val()
};
//提交數(shù)據(jù)給Login.ashx頁面處理
$.post("Ajax/Login.ashx",data,function(result){
if(result == "1") //登錄成功
{
alert("登錄成功!您可以進(jìn)行其他操作了!");
// 關(guān)閉模擬窗口
window.parent.window.jBox.close();
}
else if(result == "2") //驗(yàn)證碼錯(cuò)誤
{
$('#txtCheckCode').next("span").css("color","red").text("*
驗(yàn)證碼錯(cuò)誤");
}
else
{
alert("登錄失??!請(qǐng)重試");
}
});
}
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("*驗(yàn)證碼不為空");
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"); //登錄失敗,用戶名或密碼錯(cuò)誤
}
}
}
else
{
context.Response.Write("2"); // 驗(yàn)證碼錯(cuò)誤
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
復(fù)制代碼 代碼如下:
<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代碼:
復(fù)制代碼 代碼如下:
<form id="form1" onsubmit="return false;">
<table id="login-table">
<tr>
<td width="60">學(xué)號(hào):</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">驗(yàn)證碼:</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;">輸入下圖中的字符,不區(qū)分大小寫</div><br />
<img src="CheckCode.aspx" style="vertical-align:middle;" alt="驗(yàn)證碼" 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代碼:
復(fù)制代碼 代碼如下:
<script language="javascript" type="text/javascript" >
$(document).ready(function(){
// 驗(yàn)證碼更新
$('#change_image').click(
function(){
$('#imgCheckCode').attr('src','CheckCode.aspx?'+Math.random());
});
//關(guān)鍵的代碼
$("#btnLogin").click(function(){
if(checkUserName() && checkUserPwd() && checkCheckCode())
{
var data = {
UserName: $('#txtUserName').val(),
UserPwd: $('#txtUserPwd').val(),
CheckCode: $('#txtCheckCode').val()
};
//提交數(shù)據(jù)給Login.ashx頁面處理
$.post("Ajax/Login.ashx",data,function(result){
if(result == "1") //登錄成功
{
alert("登錄成功!您可以進(jìn)行其他操作了!");
// 關(guān)閉模擬窗口
window.parent.window.jBox.close();
}
else if(result == "2") //驗(yàn)證碼錯(cuò)誤
{
$('#txtCheckCode').next("span").css("color","red").text("*
驗(yàn)證碼錯(cuò)誤");
}
else
{
alert("登錄失??!請(qǐng)重試");
}
});
}
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("*驗(yàn)證碼不為空");
return false;
}
else
{
$('#txtCheckCode').next("span").css("color","red").text("");
return true;
}
}
</script>
Login.ashx代碼:
復(fù)制代碼 代碼如下:
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"); //登錄失敗,用戶名或密碼錯(cuò)誤
}
}
}
else
{
context.Response.Write("2"); // 驗(yàn)證碼錯(cuò)誤
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
您可能感興趣的文章:
- jQuery+Ajax用戶登錄功能的實(shí)現(xiàn)
- jquery ajax 登錄驗(yàn)證實(shí)現(xiàn)代碼
- 一款經(jīng)典的ajax登錄頁面 后臺(tái)asp.net
- 基于jquery ajax 用戶無刷新登錄方法詳解
- PHP+jQuery+Ajax實(shí)現(xiàn)用戶登錄與退出
- 簡(jiǎn)單示例AJAX結(jié)合PHP代碼實(shí)現(xiàn)登錄效果代碼
- jQuery.ajax 用戶登錄驗(yàn)證代碼
- jQuery+AJAX實(shí)現(xiàn)遮罩層登錄驗(yàn)證界面(附源碼)
- Ajax異步方式實(shí)現(xiàn)登錄與驗(yàn)證
- Ajax實(shí)現(xiàn)漂亮、安全的登錄界面
相關(guān)文章
Xamarin.Forms在安卓機(jī)上進(jìn)行本機(jī)調(diào)試
這篇文章介紹了Xamarin.Forms在安卓機(jī)上進(jìn)行本機(jī)調(diào)試的方法,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-02-02CKEditor與dotnetcore實(shí)現(xiàn)圖片上傳功能
這篇文章主要為大家詳細(xì)介紹了CKEditor與dotnetcore實(shí)現(xiàn)圖片上傳功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09asp.net如何將DataSet轉(zhuǎn)換成josn并輸出
將DataSet轉(zhuǎn)換成josn并輸出,如果解析有問題可以把代碼中的"用"替換,需要的朋友可以參考下2014-08-08asp.net動(dòng)態(tài)加載用戶控件,關(guān)于后臺(tái)添加、修改的思考
一直以來,我都在思考,一些繁瑣的操作,比如我們一般的管理后臺(tái),很多都是數(shù)據(jù)的添加、修改與刪除,列表的操作,而且一般我們都是用.aspx文件去做的。2009-04-04調(diào)試ASP.NET2005/2008時(shí),端口不正確的解決三套方案
這篇文章主要介紹了調(diào)試ASP.NET2005/2008時(shí),端口不正確的解決三套方案,小編就特別喜歡收藏這類文章,方便以后工作學(xué)習(xí)中遇到這類問題進(jìn)行解決。2015-09-09asp.net頁面與頁面之間傳參數(shù)值方法(post傳值和get傳值)
這篇文章主要介紹了asp.net頁面與頁面之間傳參數(shù)值方法,說明了post傳值和get傳值的使用方法,需要的朋友可以參考下2014-02-02有潛在危險(xiǎn)的 Request.Form 值避免方法
在 .net framework 4.0中在 system.web 中加上httpRuntime requestValidationMode="2.0" 這句即可解決,需要的朋友可以了解下2013-12-12