使用 JQUERY 的 用戶認(rèn)證和注冊技術(shù)
如果您對 jQuery 不是很熟悉，它本質(zhì)上是一個(gè) JavaScript 庫，使 JavaScript 開發(fā)變得很容易。它使所需的代碼量最小化，因?yàn)樗性S多內(nèi)置功能，這樣您就不再需要為這些功能編寫客戶端函數(shù)或?qū)ο罅?。更多信息和下載 jQuery 庫的鏈接，見 參考資料；或者，如您在所有代碼樣例中看到的那樣，可以直接嵌入 jQuery 庫的當(dāng)前版本。
使用 JQUERY 進(jìn)行表單提交
無需重載即可提交一個(gè)表單在很多場景中都是很有用的。 例如，有了它，您就可以在提交表單之前使用 JavaScript 代碼驗(yàn)證表單字段，來在一個(gè)單頁面應(yīng)用程序中提交表單或者 — 如本文所示— 確定是否用戶名已經(jīng)注冊過。使用 jQuery 觸發(fā)一個(gè)表單提交有兩種方法：使用 submit 處理函數(shù)或 click 處理函數(shù)。清單 1 顯示了如何使用 submit 處理函數(shù)提交一個(gè)表單。
清單 1. 使用 jQuery 的 submit 處理函數(shù)提交表單
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#submitForm').submit(function(e) {
alert($('#sample').attr('value'));
return e.preventDefault();
});
});
</script>
<form id="submitForm" method="post">
<input type="text" name="sample" id="sample" value="Enter something" />
<input type="submit" id="submitBtn" value="Submit" />
</form>
清單 2 展示如何使用 click 處理函數(shù)提交表單。
清單 2. 使用 jQuery 的 click 處理函數(shù)提交表單
<script type="text/javascript"
src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#submitBtn').click(function(e) {
alert($('#sample').attr('value'));
return e.preventDefault();
});
});
</script>
<form id="submitForm" method="post">
<input type="text" name="sample" id="sample" value="Enter something" />
<input type="submit" id="submitBtn" value="Submit" />
</form>
這兩個(gè)清單基本上是一樣的：它們都是嵌入 jQuery 庫的，在訪問任何元素之前使用 ready 處理函數(shù)確認(rèn)頁面被加載，處理函數(shù)包括相同的代碼。惟一的不同是處理函數(shù)和分配給處理函數(shù)的元素。submit 處理函數(shù)需要分配一個(gè)表單元素，而 click 處理函數(shù)，任何可點(diǎn)擊的元素即可 — 本例中是 Submit 按鈕。為了避免提交表單時(shí)刷新頁面，您必須使用preventDefault 函數(shù)。要訪問 preventDefault 函數(shù)，您必須傳遞處理函數(shù)（即使作為一個(gè)參數(shù)）或者使用它訪問該函數(shù)。
盡管以上兩種選擇都是有效的，但 submit 處理函數(shù)更為常用些。然而，有些情況下，您可能又不止一個(gè) Submit 按鈕，這就需要每個(gè)按鈕一個(gè) click 處理函數(shù)。清單 3 展示了這樣一個(gè)必須使用 click 處理函數(shù)的場景，因?yàn)閮蓚€(gè) Submit 按鈕都能觸發(fā)表單提交。
清單 3. 使用兩個(gè) submit 按鈕提交表單
<script type="text/javascript"
src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="register.js"></script>
<div id="container">
<div id="message"></div>
<form method="post" id="mainform">
<label for="username">Username</label>
<input type="text" name="username" id="username" value="" />
<label for="password">Password</label>
<input type="password" name="password" value="" />
<input type="submit" name="action" id="login" value="Log in" />
<h2>Extra options (registration only)</h2>
<label for="firstname">First name</label>
<input type="text" name="firstname" value="" />
<label for="lastname">Last name</label>
<input type="text" name="lastname" value="" />
<label for="email">Email</label>
<input type="text" name="email" value="" />
<input type="submit" name="action" id="register" value="Register" />
</form>
</div>
注意，在本例中這個(gè)表單可以執(zhí)行多個(gè)活動：現(xiàn)有用戶可以登錄，新用戶可以通過輸入附加賬戶信息進(jìn)行注冊。使用表單上的 submit 處理函數(shù)在這種場景中不能運(yùn)行，因?yàn)樗荒艽_定哪個(gè)按鈕觸發(fā)表單提交。因此，清單 4 使用 click 處理函數(shù)來確定每個(gè)按鈕采取什么行動，便于您以后依此處理數(shù)據(jù)。
清單 4. register.js 中提交按鈕的 Click 處理函數(shù)
$(document).ready(function() {
$("#register, #login").click(function(e) {
var name = ($(event.target).attr('id') == 'register') ? 'Registration' : 'Login';
return e.preventDefault();
});
});
文檔準(zhǔn)備好后，您需要為 Register 和 Login 按鈕分配 click 處理函數(shù)。click 處理函數(shù)接收一個(gè)參數(shù)，命名為 e（作為事件） 。此事件對象稍后用來預(yù)防默認(rèn)表單提交。正如之前代碼所述。當(dāng) click 處理函數(shù)被調(diào)用時(shí)，當(dāng)前被點(diǎn)擊的對象的 ID 被訪問，用來確定這是一個(gè)用戶登錄還是一個(gè)新用戶注冊。
穩(wěn)定
產(chǎn)品高可用性高并發(fā)貼心
項(xiàng)目群及時(shí)溝通專業(yè)
產(chǎn)品經(jīng)理1v1支持快速
MVP模式小步快跑承諾
我們選擇聲譽(yù)堅(jiān)持
10年專注高端品質(zhì)開發(fā)