jquery ajax使用者登入執行個體小結

來源:互聯網
上載者:User


密碼和驗證碼後,Login.aspx頁面的jQuery代碼post到Login.ashx頁面處理,Login.ashx頁面可以算是簡易的aspx頁面吧。

當然你用LoginProcess.aspx 也是可以的。Login.ashx頁面處理完把結果返回給Login.aspx頁面處理,result變數用與接收結果。


如果返回1表示登入成功,則關閉類比視窗。


首頁面調用程式碼片段:

 

 代碼如下 複製代碼

<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">學號:</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代碼:
複製代碼 代碼如下:
<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;
}
}
}
}

 

使用jquery+ajax/" target="_blank">jquery ajax優點與持缺點分析

優點

小,壓縮後代碼只有20多k(無壓縮代碼94k)。

  Selector和DOM操作的方便:jQuery的Selector與mootools的Element.Selectors.js比較,CSS Selector, XPath Selector(1.2後已刪除)

  Chaining:總是返回一個jQuery對象,可以連續操作。

  文檔的完整,易用性(每個API都有完整的例子,這是其它架構現在不能比的),而且網上還有很多其它的文檔,書籍。

  應用的廣泛,包括google code也使用了jQuery。

  使用jQuery的網站:http://docs.jquery.com/Sites_Using_jQuery

  核心的Team Dev和核心人員:John Resig等。

  簡潔和簡短的文法,容易記。

  可擴充性:有大量使用者開發的外掛程式可供使用(http://jquery.com/plugins/)

  jQuery UI(http://jquery.com/plugins/,基於jQuery,但和核心的jQuery是獨立的),不斷髮展中。

  友好和活躍的社區:google groups:http://docs.jquery.com/Discussion

  事件處理有很多方便的方法,如click,而不是單一的addEvent之類的。

缺點

  由於設計思想是追求高效和簡潔,沒有物件導向的擴充。設計思路和Mootools不一樣。

  CSS Selector的速度稍微有些慢(但是現在速度已經大幅提高)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.