asp.net+jquery ajax無刷新登錄的實現(xiàn)方法
更新時間:2013年06月12日 15:07:25 作者:
asp.net+jquery ajax無刷新登錄的實現(xiàn)方法,需要的朋友可以參考一下
因為工作需要研究了一下 js的ajax,下面是成果。
主要是三部分:
一、js部分 友情提示注意js部分中的 $("#btn_login")中的return false;這個可以阻止回轉(zhuǎn)服務(wù)器不然還是會刷新
$(document).ready(function () {
$("#btn_login").click(function () {
postlogin();
return false;
});
});
function postlogin() {
if (checkUserName() && checkUserPwd()) {
var username = $('#txt_loginname').val();
var userpass = $('#txt_loginpass').val();
$.post("../UserLogin.aspx", { UserName: username, UserPass: userpass }, function (result) {
if (result == "1") {
alert("登錄成功!");
} else if (result == "3") {
alert("用戶名不正確!");
} else if (result == "2") {
alert("密碼不正確!");
} else {
alert("登錄失敗!請重試!" + result);
}
});
}
}
function checkUserName() {
if ($("#txt_loginname").val().length == 0) {
alert('用戶名不能為空!');
return false;
} else {
return true;
}
}
function checkUserPwd() {
if ($("#txt_loginpass").val().lenght == 0) {
alert('密碼不正確!');
return false;
} else {
return true;
}
}
二、頁面部分
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="32%" height="37" valign="middle">用戶名:</td>
<td width="68%" valign="middle">
<input type="text" name="txt_loginname" id="txt_loginname" class="input_1"/>
</td>
</tr>
<tr>
<td height="37" valign="middle">密 碼:</td>
<td valign="middle">
<input type="password" name="txt_loginpass" id="txt_loginpass" class="input_2"/>
</td>
</tr>
<!--<tr>
<td height="37" valign="middle">驗證碼:</td>
<td valign="middle">
<input type="text" name="textfield3" id="textfield3" class="input_3" style="float:left"/>
<span style="float:left; margin-left:6px;"><img src="images/img_7.gif" /></span></td>
</tr>-->
<tr>
<td colspan="2">
<input type="image" name="btn_login" id="btn_login" src="images/img_4.gif" />
<input type="image" name="input" src="images/img_5.gif" />
<input type="image" name="input" src="images/img_6.gif" />
</td>
</tr>
</table>
三、后臺部分也就是在js中轉(zhuǎn)向的處理登錄信息的頁面
protected void Page_Load(object sender, EventArgs e)
{
string username = Request.Form["UserName"];
string userpass = Request.Form["UserPass"];
T_User user = UserManager.loginpassword(username, userpass);
if (user != null)
{
Session["user"] = user;
Response.Write("1"); //登錄成功
Response.End();
}
else
{
if (UserManager.OnlyOne(username) >= 1)
{
Response.Write("2"); //密碼不正確
Response.End();
}
else
{
Response.Write("3"); //用戶名不存在
Response.End();
}
}
}
主要是三部分:
一、js部分 友情提示注意js部分中的 $("#btn_login")中的return false;這個可以阻止回轉(zhuǎn)服務(wù)器不然還是會刷新
復(fù)制代碼 代碼如下:
$(document).ready(function () {
$("#btn_login").click(function () {
postlogin();
return false;
});
});
function postlogin() {
if (checkUserName() && checkUserPwd()) {
var username = $('#txt_loginname').val();
var userpass = $('#txt_loginpass').val();
$.post("../UserLogin.aspx", { UserName: username, UserPass: userpass }, function (result) {
if (result == "1") {
alert("登錄成功!");
} else if (result == "3") {
alert("用戶名不正確!");
} else if (result == "2") {
alert("密碼不正確!");
} else {
alert("登錄失敗!請重試!" + result);
}
});
}
}
function checkUserName() {
if ($("#txt_loginname").val().length == 0) {
alert('用戶名不能為空!');
return false;
} else {
return true;
}
}
function checkUserPwd() {
if ($("#txt_loginpass").val().lenght == 0) {
alert('密碼不正確!');
return false;
} else {
return true;
}
}
二、頁面部分
復(fù)制代碼 代碼如下:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="32%" height="37" valign="middle">用戶名:</td>
<td width="68%" valign="middle">
<input type="text" name="txt_loginname" id="txt_loginname" class="input_1"/>
</td>
</tr>
<tr>
<td height="37" valign="middle">密 碼:</td>
<td valign="middle">
<input type="password" name="txt_loginpass" id="txt_loginpass" class="input_2"/>
</td>
</tr>
<!--<tr>
<td height="37" valign="middle">驗證碼:</td>
<td valign="middle">
<input type="text" name="textfield3" id="textfield3" class="input_3" style="float:left"/>
<span style="float:left; margin-left:6px;"><img src="images/img_7.gif" /></span></td>
</tr>-->
<tr>
<td colspan="2">
<input type="image" name="btn_login" id="btn_login" src="images/img_4.gif" />
<input type="image" name="input" src="images/img_5.gif" />
<input type="image" name="input" src="images/img_6.gif" />
</td>
</tr>
</table>
三、后臺部分也就是在js中轉(zhuǎn)向的處理登錄信息的頁面
復(fù)制代碼 代碼如下:
protected void Page_Load(object sender, EventArgs e)
{
string username = Request.Form["UserName"];
string userpass = Request.Form["UserPass"];
T_User user = UserManager.loginpassword(username, userpass);
if (user != null)
{
Session["user"] = user;
Response.Write("1"); //登錄成功
Response.End();
}
else
{
if (UserManager.OnlyOne(username) >= 1)
{
Response.Write("2"); //密碼不正確
Response.End();
}
else
{
Response.Write("3"); //用戶名不存在
Response.End();
}
}
}
您可能感興趣的文章:
- jQuery Ajax 實現(xiàn)在html頁面實時顯示用戶登錄狀態(tài)
- jQuery+Ajax+PHP彈出層異步登錄效果(附源碼下載)
- jQuery+AJAX實現(xiàn)遮罩層登錄驗證界面(附源碼)
- JQuery+Ajax+Struts2+Hibernate框架整合實現(xiàn)完整的登錄注冊
- PHP+jQuery+Ajax實現(xiàn)用戶登錄與退出
- S2SH整合JQuery+Ajax實現(xiàn)登錄驗證功能實現(xiàn)代碼
- div彈出層的ajax登錄(Jquery版+c#)
- 基于jquery ajax 用戶無刷新登錄方法詳解
- jQuery.ajax 用戶登錄驗證代碼
- jQuery+Ajax用戶登錄功能的實現(xiàn)
- jquery ajax 登錄驗證實現(xiàn)代碼
- jQuery基于ajax實現(xiàn)頁面加載后檢查用戶登錄狀態(tài)的方法
相關(guān)文章
asp.net(c#)Enterprise Library 3.0 下載
asp.net(c#)Enterprise Library 3.0 下載...2007-04-04解決Visual Studio 2005 無法顯示設(shè)計視圖的方法
解決Visual Studio 2005 無法顯示設(shè)計視圖的方法...2007-04-04ASP.NET保存PDF、Word和Excel文件到數(shù)據(jù)庫
這篇文章主要為大家詳細(xì)介紹了ASP.NET保存PDF、Word和Excel文件到數(shù)據(jù)庫的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01Entity?Framework生成DataBase?First模式
本文詳細(xì)講解了Entity?Framework生成DataBase?First模式的方法,文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-03-03ASP.NET.4.5.1+MVC5.0設(shè)置系統(tǒng)角色與權(quán)限(二)
這篇文章主要介紹了使用ASP.NET.4.5.1+MVC5.0構(gòu)建項目中設(shè)置系統(tǒng)角色的全部過程,十分的詳細(xì),附上全部源碼,推薦給想學(xué)習(xí).net+mvc的小伙伴們2015-01-01ASP.NET Session的七點認(rèn)識小結(jié)
ASP.NET Session的使用當(dāng)中我們會遇到很多的問題,那么這里我們來談下經(jīng)常出現(xiàn)的一些常用ASP.NET Session的理解2011-07-07System.Runtime.InteropServices.COMException的解決方法
完美解決“換另一臺電腦上用VS2008繼續(xù)開發(fā)web項目時出現(xiàn)“System.Runtime.InteropServices.COMException”,然后是加載不了項目?!?2009-03-03