快捷導(dǎo)航

jquery學(xué)習(xí)筆記用jquery實(shí)現(xiàn)無(wú)刷新登錄

更新時(shí)間：2011年08月08日 23:41:27 作者：

為了防止以后好久不用生疏，在這里記下，供剛開(kāi)始學(xué)習(xí)jquery的童鞋們借鑒，我也是剛開(kāi)始學(xué)jquery，有什么寫(xiě)的不對(duì)的地方，還請(qǐng)大家指出錯(cuò)誤，共同進(jìn)步。

好了，嘮嗑就到這里，現(xiàn)在看如何用jquery實(shí)現(xiàn)無(wú)刷新登錄。
首先先創(chuàng)建html的部分

復(fù)制代碼代碼如下:

 
<table> 
<tr> 
<td> 
用戶(hù)名： 
</td> 
<td> 
<input type="text" id="username" /> 
</td> 
</tr> 
<tr> 
<td> 
密碼： 
</td> 
<td> 
<input type="text" id="password" /> 
</td> 
</tr> 
<tr> 
<td> 
驗(yàn)證碼： 
</td> 
<td> 
<input type="text" id="cord" /> 
<img alt="點(diǎn)擊更換驗(yàn)證碼" title="看不清楚，請(qǐng)單擊我！" id="checkcord" src="img.ashx" /> 
</td> 
</tr> 
<tr> 
<td> 
<input type="button" onclick="login();" value="登錄" /> 
</td> 
<td> 
</td> 
</tr> 
</table> 

這里面包含的功能有：登錄的驗(yàn)證，點(diǎn)擊更換驗(yàn)證碼。這個(gè)沒(méi)有什么好說(shuō)的。
下面是jquery的部分

復(fù)制代碼代碼如下:

 
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>-----------別忘了引用這個(gè)鏈接，否則jquery不能用 
<script type="text/javascript"> 
//用jquery實(shí)現(xiàn)無(wú)刷新的登錄驗(yàn)證 
function login() { 
$.ajax({ 
url: 'Login.ashx', //訪問(wèn)路徑 
data: 'username=' + $("#username").val() + "&password=" + $("#password").val() + "&cord=" + $("#cord").val(), //需要驗(yàn)證的參數(shù) 
type: 'post', //傳值的方式 
error: function () {//訪問(wèn)失敗時(shí)調(diào)用的函數(shù) 
alert("鏈接服務(wù)器錯(cuò)誤！"); 
}, 
success: function (msg) {//訪問(wèn)成功時(shí)調(diào)用的函數(shù),這里的msg是Login.ashx返回的值 
alert(msg); 
} 
}); 
} 
//驗(yàn)證碼圖片 
$(function () { 
$("#username").focus(); 
$("#checkcord").click(function () { 
$("#checkcord").attr("src", "img.ashx?time=" + new Date()); 
}); 
}) 
</script> 

大概的核心代碼就是這些了，當(dāng)用戶(hù)點(diǎn)擊登錄按鈕時(shí)，觸發(fā)login事件，用jquery向Login.ashx發(fā)出請(qǐng)求，在Login.ashx當(dāng)中，僅僅只是驗(yàn)證用戶(hù)名和密碼是否匹配，驗(yàn)證碼是否正確。Login.ashx是用C#語(yǔ)言寫(xiě)的，如果你們學(xué)習(xí)的是別的語(yǔ)言就將地址更換為別的就可以了。
img.ashx是生成驗(yàn)證碼的程序，每點(diǎn)擊一次圖片都會(huì)重新訪問(wèn)img.ashx，所以圖片是更換的，在生成圖片的時(shí)候，會(huì)生成存儲(chǔ)驗(yàn)證碼的session，在Login.ashx當(dāng)中，判斷用戶(hù)輸入的值和session的值是否相同就可以了。在這里我只顯示主要的源碼了。

復(fù)制代碼代碼如下:

 
context.Response.ContentType = "text/plain"; 
string username = context.Request.Form["username"]; 
string password = context.Request.Form["password"]; 
string cord = context.Request.Form["cord"]; 
if (context.Session["cord"] != null) 
{ 
if (context.Session["cord"].ToString() == cord) 
{ 
if (username == "admin" && password == "admin") 
{ 
context.Response.Write("登錄成功！"); 
} 
else 
{ 
context.Response.Write("登錄失敗！用戶(hù)名和密碼錯(cuò)誤!"); 
} 
} 
else 
{ 
context.Response.Write("驗(yàn)證碼錯(cuò)誤！"); 
} 
} 