前面介紹了《jquery+ajax注冊實(shí)時(shí)驗(yàn)證》及《jQuery使用$.ajax進(jìn)行即時(shí)驗(yàn)證的方法》。這里進(jìn)一步總結(jié)了jQuery的Ajax用戶認(rèn)證和注冊技術(shù)。分享給大家供大家參考，具體如下：
Ajax 表單提交是一個(gè)功能強(qiáng)大的技術(shù)，提供一種發(fā)送 web 表單的方法，無需重載瀏覽器窗口。jQuery 庫讓您使用 Ajax 表單提交功能進(jìn)一步提供一個(gè)方便快捷的方法，以少量代碼生成可用 Ajax 的 Web 表單。在本文中，學(xué)習(xí)如何使用 jQuery 創(chuàng)建基礎(chǔ) Ajax 表單提交，以及如何使用該技術(shù)驗(yàn)證一個(gè)用戶。本文使用 jQuery 演示了 Ajax 用戶注冊技術(shù)，比如，檢查用戶名可用性，以及當(dāng)選擇的用戶名已存在時(shí)提示用戶名。既不需要表單提交也無需頁面重載。
如果您對 jQuery 不是很熟悉，它本質(zhì)上是一個(gè) JavaScript 庫，使 JavaScript 開發(fā)變得很容易。它使所需的代碼量最小化，因?yàn)樗性S多內(nèi)置功能，這樣您就不再需要為這些功能編寫客戶端函數(shù)或?qū)ο罅恕８嘈畔⒑拖螺d jQuery 庫的鏈接，可參見本站相關(guān)資料；或者，如您在所有代碼樣例中看到的那樣，可以直接嵌入 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> 使用 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è)活動(dòng)：現(xiàn)有用戶可以登錄，新用戶可以通過輸入附加賬戶信息進(jìn)行注冊。使用表單上的 submit 處理函數(shù)在這種場景中不能運(yùn)行，因?yàn)樗荒艽_定哪個(gè)按鈕觸發(fā)表單提交。因此，清單 4 使用 click 處理函數(shù)來確定每個(gè)按鈕采取什么行動(dòng)，便于您以后依此處理數(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è)新用戶注冊。
現(xiàn)在，您已經(jīng)知道了使用 jQuery 如何提交表單，我們來看看使用 jQuery 中的 Ajax 和 PHP 如何認(rèn)證一個(gè)用戶。
使用 jQuery 中的 Ajax 功能注冊和認(rèn)證一個(gè)用戶
要認(rèn)證和注冊一個(gè)用戶，您需要一個(gè)服務(wù)器端語言和一個(gè)數(shù)據(jù)庫。在本文中，服務(wù)器端語言是 PHP，數(shù)據(jù)庫是 MySQL，您不需要使用任何特定的服務(wù)器端語言或者數(shù)據(jù)庫來創(chuàng)建此函數(shù)。
首先開始在 JavaScript 文件中編寫附加代碼，使用 Ajax 將表單發(fā)送給 PHP 。清單 5 的代碼開始也類似于清單 4 ，因?yàn)樗粹o的 ready 處理函數(shù)和 click 處理函數(shù)，而且它確定點(diǎn)擊哪個(gè)按鈕。然后，如果消息元素是打開的，您需要使用 slideUp 函數(shù)關(guān)閉它的。咋一看 Ajax 調(diào)用不是很明顯，特別是如果您過去通常不 使用 jQuery 創(chuàng)建 Ajax，因?yàn)槟ǔＪ褂煤唽懞瘮?shù)來發(fā)送調(diào)用，在代碼中甚至都沒提及 Ajax。
清單 5. 使用 jQuery 中的 Ajax 提交一個(gè) web 表單
$(document).ready(function() { $("#register, #login").click(function(e) { var name = ($(event.target).attr('id') == 'register') ? 'Registration' : 'Login'; $('#message').slideUp('fast'); $.post('service.php', $('#mainform').serialize() +'&action='+ $(event.target).attr('id'), function(data) { var code = $(data)[0].nodeName.toLowerCase(); $('#message').removeClass('error'); $('#message').removeClass('success'); $('#message').addClass(code); if(code == 'success') { $('#message').html(name + ' was successful.'); } else if(code == 'error') { $('#message').html('An error occurred, please try again.'); } $('#message').slideDown('fast'); }); return e.preventDefault(); });}); post 函數(shù)是一個(gè)簡寫函數(shù)，等價(jià)于清單 6 中的代碼。它將文件路徑指向被請求的文件、序列化數(shù)據(jù)、最后是一個(gè)回調(diào)函數(shù)。用 jQuery 序列化表單數(shù)據(jù)比較容易：您只需要訪問 form 元素和調(diào)用 serialize 功能獲取一個(gè)標(biāo)準(zhǔn)查詢字符串。回調(diào)函數(shù)首先通過訪問響應(yīng)的第一個(gè)節(jié)點(diǎn)來確定調(diào)用是成功還是失敗：PHP 文件以一個(gè)名為 success or error 的節(jié)點(diǎn)返回結(jié)果。狀態(tài)確定之后，您就可以從之前的表單提交中刪除 message 元素中留下的任何類。然后添加一個(gè)響應(yīng)成功對應(yīng)的類。message 元素被附加到聲明成功或錯(cuò)誤消息的 HTML 后，然后使用 jQuery 的 slideDown 函數(shù)打開 message。
清單 6. jQuery Ajax 函數(shù)
$.ajax({ type: 'POST', url: url, data: data, success: success dataType: dataType}); 在創(chuàng)建同數(shù)據(jù)庫交互的 PHP 文件之前，您需要構(gòu)建您計(jì)劃保存新用戶和選擇現(xiàn)有用戶表單的數(shù)據(jù)庫。清單 7 包含了您需要的 SQL 代碼，來創(chuàng)建名為 ibm_user_auth 的 MySQL 表，其中包括一個(gè) ID，用戶名、密碼、名字、姓、以及 Email 地址。ID 被設(shè)置為自動(dòng)增量并作為主鍵。其他值都是 tinytext 型的，除了密碼，密碼是 varchar(32) 的，因?yàn)樯院竽鷮⑹褂盟鼇肀４嬉粋€(gè)消息摘要算法 5（MD5）加密的值。
清單 7. 為用戶創(chuàng)建 MySQL 數(shù)據(jù)庫表的 SQL 代碼
CREATE TABLE `ibm_user_auth` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` tinytext NOT NULL, `password` varchar(32) NOT NULL, `firstname` tinytext NOT NULL, `lastname` tinytext NOT NULL, `email` tinytext NOT NULL, PRIMARY KEY (`id`));
表構(gòu)建完成之后，您就可以開始編寫與數(shù)據(jù)庫交互的 PHP 代碼了。您將在您的 Ajax post 函數(shù)中調(diào)用該文件 — 名為 service.php。清單 8 顯示了構(gòu)成該文件的代碼。首先定義數(shù)據(jù)庫連接變量。數(shù)據(jù)庫信息建立之后，確保用戶名和密碼被通過表單張貼傳遞；如果是這樣，提取張貼數(shù)據(jù)然后連接到數(shù)據(jù)庫。現(xiàn)在您已經(jīng)連接到數(shù)據(jù)庫了，需要確定是否使用發(fā)送數(shù)據(jù)來登錄一個(gè)已有用戶或注冊他/她作為一個(gè)新用戶。您只需要檢查 action 變量是從張貼數(shù)據(jù)提取的和被 Ajax 表單張貼發(fā)送的，就可以確定了。
如果您確定這是一個(gè)新用戶注冊，您也需要確定名字、姓和 email 地址已經(jīng)發(fā)送。否則，只能是一個(gè)錯(cuò)誤，當(dāng)所有需求都滿足之后，確保用戶名不和數(shù)據(jù)庫中現(xiàn)有的用戶名重復(fù)，如果是重復(fù)了，也是返回一個(gè)錯(cuò)誤。否則，繼續(xù)驗(yàn)證 email 地址，將新用戶數(shù)據(jù)庫插入數(shù)據(jù)庫，然后返回一個(gè)成功消息。
如果您確定這是一個(gè)現(xiàn)有用戶想要的登錄，確保用戶名是存在數(shù)據(jù)庫中。如果是，將用戶數(shù)據(jù)保存到一個(gè)會話中，然后返回一個(gè)成功消息。
清單 8. 與 JavaScript 代碼和數(shù)據(jù)庫交互的服務(wù)器端 PHP 代碼
// Database connection valuesdefine('DB_HOST', 'localhost');define('DB_USERNAME', 'YOUR_USERNAME');define('DB_PASSWORD', 'YOUR_PASSWORD');define('DB_NAME', 'YOUR_DB_NAME');if(isset($_POST['username'], $_POST['password'])) { extract($_POST); $db = mysql_connect(DB_HOST, DB_USERNAME, DB_PASSWORD); mysql_select_db(DB_NAME, $db); if($action == 'register' && isset($_POST['firstname'], $_POST['lastname'], $_POST['email'])) { // Verify that the username is unique $query = mysql_query("select count(id) from ibm_user_auth where username='$username'"); $result = mysql_fetch_row($query); if ( $result[0] > 0 ) { die("<error id='0' />"); } // Validate email if( !preg_match("^[a-z0-9,!#/$%&'/*/+/=/?/^_`/{/|}~-]+(/.[a-z0-9,!#/$%& '/*/+/=/?/^_`/{/|}~-]+)*@[a-z0-9-]+(/.[a-z0-9-]+)*/.([a-z]{2,})$^", $_POST['email']) ) { die("<error id='1' />"); } mysql_query("insert into ibm_user_auth (username, password, firstname, lastname, email) VALUES ('$username', MD5('$password'), '$firstname', '$lastname', '$email')"); die("<success />"); } else if($action == 'login') { $query = mysql_query("select count(id) from ibm_user_auth where username='$username' and password=md5('$password')"); $result = mysql_fetch_row($query); if($result[0] == 1) { session_start(); $_SESSION['username'] = $username; die("<success />"); } else die("<error id='2' />"); }}?> 現(xiàn)在，您已經(jīng)完成了要點(diǎn)工作，考慮使用性能可能是一個(gè)好主意。該代碼最大的問題是如果出現(xiàn)錯(cuò)誤不能告知用戶是什么錯(cuò)誤。然而，您可能注意到了，每個(gè)錯(cuò)誤響應(yīng)包含一個(gè) id 屬性，下一節(jié)向您展示如何使用這些值來為每個(gè)場景編寫一個(gè)錯(cuò)誤響應(yīng)，以及在注冊過程中提示用戶名。
在注冊過程中處理錯(cuò)誤和提示用戶名
此時(shí)，使用上述代碼處理錯(cuò)誤是較為容易的。特別是您已經(jīng)返回錯(cuò)誤，且錯(cuò)誤中含有指向可能出現(xiàn)問題的具體 ID。如果您已經(jīng)構(gòu)建了 ID，那么開始添加 PHP 代碼，此代碼用于在返回到 JavaScript 代碼之前提示用戶名。清單 9 提供一個(gè)如何根據(jù)用戶提交信息創(chuàng)建用戶名暗示的示例 — 本例中是名字和姓。
清單 9. 使用提交的用戶數(shù)據(jù)創(chuàng)建用戶名提示
// Database connection valuesdefine('DB_HOST', 'localhost');define('DB_USERNAME', 'YOUR_USERNAME');define('DB_PASSWORD', 'YOUR_PASSWORD');define('DB_NAME', 'YOUR_DB_NAME');if(isset($_POST['username'], $_POST['password'])) { extract($_POST); $db = mysql_connect(DB_HOST, DB_USERNAME, DB_PASSWORD); mysql_select_db(DB_NAME, $db); if($action == 'register' && isset($_POST['firstname'], $_POST['lastname'], $_POST['email'])) { // Verify that the username is unique $query = mysql_query("select count(id) from ibm_user_auth where username='$username'"); $result = mysql_fetch_row($query); if ( $result[0] > 0 ) { $out = "<error id='0'><suggestions>"; $out .= "<suggestion>" . $firstname . $lastname . "</suggestion>"; $out .= "<suggestion>" . $firstname . "_" . $lastname . "</suggestion>"; $out .= "<suggestion>" . $lastname . $firstname . "</suggestion>"; $out .= "<suggestion>" . $lastname . "_" . $firstname . "</suggestion>"; $out .= "</suggestions></result>"; die($out); } // Validate email if( !preg_match("^[a-z0-9,!#/$%&'/*/+/=/?/^_`/{/|}~-]+(/.[a-z0-9,!#/$%& '/*/+/=/?/^_`/{/|}~-]+)*@[a-z0-9-]+(/.[a-z0-9-]+)*/.([a-z]{2,})$^", $_POST['email']) ) { die("<error id='1' />"); } mysql_query("insert into ibm_user_auth (username, password, firstname, lastname, email) VALUES ('$username', MD5('$password'), '$firstname', '$lastname', '$email')"); die("<success />"); } else if($action == 'login') { $query = mysql_query("select count(id) from ibm_user_auth where username='$username' and password=md5('$password')"); $result = mysql_fetch_row($query); if($result[0] == 1) { session_start(); $_SESSION['username'] = $username; die("<success />"); } else die("<error id='2' />"); }}?> 注意，在注冊過程中如果用戶名已存在，您可以創(chuàng)建一個(gè)包含各種提交用戶名組合數(shù)據(jù)（構(gòu)成提示用戶名）的 XML 結(jié)構(gòu)。您甚至可以進(jìn)一步在返回之前確認(rèn)用戶名提示不在數(shù)據(jù)庫中。
使用 jQuery 顯示提示信息
清單 10. 使用 jQuery 顯示提示用戶名
$(document).ready(function() { $("#register, #login").click(function(e) { var name = ($(event.target).attr('id') == 'register') ? 'Registration' : 'Login'; $('#message').slideUp('fast'); $.post('service.php', $('#mainform').serialize() +'&action='+ $(event.target).attr('id'), function(data) { var code = $(data)[0].nodeName.toLowerCase(); $('#message').removeClass('error'); $('#message').removeClass('success'); $('#message').addClass(code); if(code == 'success') { $('#message').html(name + ' was successful.'); } else if(code == 'error') { var id = parseInt($(data).attr('id')); switch(id) { case 0: $('#message').html('This user name has already been taken. Try some of these suggestions:'); form = $(document.createElement('form')); $(data).find('suggestions > suggestion').each(function(idx, el) { radio = $(document.createElement('input')); radio.attr({type: 'radio', name: 'suggested', id: 'suggested_'+idx, value: el.innerHTML}); lbl = $(document.createElement('label')); lbl.attr('for', 'suggested_'+idx); lbl.html(el.innerHTML); form.append(radio); form.append(lbl); form.append(''); }); $('#message').append(form); $('#message form input[type="radio"]').click(function() { $('#username').val($(this).attr('value')); }); break; case 1: $('#message').html('The e-mail entered is invalid.'); break; case 2: $('#message').html('The user name or password you entered was invalid.'); break; default: $('#message').html('An error occurred, please try again.'); } } $('#message').slideDown('fast'); }); return e.preventDefault(); });}); 現(xiàn)在，如果返回一個(gè)錯(cuò)誤，您就可以檢查錯(cuò)誤 ID，而不只是顯示對用戶沒有幫助的默認(rèn)錯(cuò)誤消息。首先，從 XML 結(jié)構(gòu)（從 PHP 返回的）中解析 ID，然后使用一個(gè)轉(zhuǎn)換語句直接指向消息或者相關(guān)代碼。第一個(gè)錯(cuò)誤 ID 是用于系統(tǒng)中已經(jīng)存在一個(gè)用戶名的情況。這就是您訪問提示用戶名和為用戶展示一個(gè)選擇新用戶名的地方。從訪問提示節(jié)點(diǎn)開始，遍歷每一個(gè)節(jié)點(diǎn)。遍歷過程中創(chuàng)建一個(gè)單選按鈕和一個(gè)包含提示的標(biāo)簽，然后將它附加到錯(cuò)誤消息，顯示給用戶。此時(shí)，用戶可以選擇一個(gè)提示名，該名稱將自動(dòng)添加到用戶名文本框，然后繼續(xù)注冊。
接下來的錯(cuò)誤 ID 是用于 email 地址驗(yàn)證的。相關(guān)代碼只顯示一個(gè)常見錯(cuò)誤消息，通知用戶發(fā)生了什么錯(cuò)誤。您甚至可以添加一行代碼來突出顯示不正確的字段。下一個(gè)是一個(gè)常見錯(cuò)誤系消息，用于登錄失敗時(shí)。在本例中，代碼使用了一個(gè)較為模糊的消息，考慮到安全原因，您不能告訴任何人那個(gè)字段是不正確的。最后，默認(rèn)消息和您 清單 5 中的是一樣的，該消息可能永遠(yuǎn)都不會使用，但是有備無患。
結(jié)束語
使用 Ajax 進(jìn)行用戶認(rèn)證日益普及，對于單頁面應(yīng)用程序幾乎是必不可少的。它對于提示用戶名也大有好處，正如本文所述，因?yàn)楫?dāng)頁面被提交后，它給用戶一個(gè)虛幻的希望，只有出現(xiàn)錯(cuò)誤時(shí)才刷新，這就是說響應(yīng)更自動(dòng)化、更用戶友好。同時(shí)也提供了一個(gè)更好用的 web 體驗(yàn)。
完整實(shí)例代碼點(diǎn)擊此處本站下載。
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
