前面介紹了《jquery+ajax注冊實時驗證》及《jQuery使用$.ajax進行即時驗證的方法》。這里進一步總結了jQuery的Ajax用戶認證和注冊技術。分享給大家供大家參考，具體如下：
Ajax 表單提交是一個功能強大的技術，提供一種發送 web 表單的方法，無需重載瀏覽器窗口。jQuery 庫讓您使用 Ajax 表單提交功能進一步提供一個方便快捷的方法，以少量代碼生成可用 Ajax 的 Web 表單。在本文中，學習如何使用 jQuery 創建基礎 Ajax 表單提交，以及如何使用該技術驗證一個用戶。本文使用 jQuery 演示了 Ajax 用戶注冊技術，比如，檢查用戶名可用性，以及當選擇的用戶名已存在時提示用戶名。既不需要表單提交也無需頁面重載。
如果您對 jQuery 不是很熟悉，它本質上是一個 JavaScript 庫，使 JavaScript 開發變得很容易。它使所需的代碼量最小化，因為它有許多內置功能，這樣您就不再需要為這些功能編寫客戶端函數或對象了。更多信息和下載 jQuery 庫的鏈接，可參見本站相關資料；或者，如您在所有代碼樣例中看到的那樣，可以直接嵌入 jQuery 庫的當前版本。
使用 jQuery 進行表單提交
無需重載即可提交一個表單在很多場景中都是很有用的。例如，有了它，您就可以在提交表單之前使用 JavaScript 代碼驗證表單字段，來在一個單頁面應用程序中提交表單或者 — 如本文所示— 確定是否用戶名已經注冊過。使用 jQuery 觸發一個表單提交有兩種方法：使用 submit 處理函數或 click 處理函數。清單 1 顯示了如何使用 submit 處理函數提交一個表單。
清單 1. 使用 jQuery 的 submit 處理函數提交表單
<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 處理函數提交表單：
清單 2. 使用 jQuery 的 click 處理函數提交表單
<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> 這兩個清單基本上是一樣的：它們都是嵌入 jQuery 庫的，在訪問任何元素之前使用 ready 處理函數確認頁面被加載，處理函數包括相同的代碼。惟一的不同是處理函數和分配給處理函數的元素。submit 處理函數需要分配一個表單元素，而 click 處理函數，任何可點擊的元素即可 — 本例中是 Submit 按鈕。為了避免提交表單時刷新頁面，您必須使用 preventDefault 函數。要訪問 preventDefault 函數，您必須傳遞處理函數（即使作為一個參數）或者使用它訪問該函數。
盡管以上兩種選擇都是有效的，但 submit 處理函數更為常用些。然而，有些情況下，您可能又不止一個 Submit 按鈕，這就需要每個按鈕一個 click 處理函數。清單 3 展示了這樣一個必須使用 click 處理函數的場景，因為兩個 Submit 按鈕都能觸發表單提交。
清單 3. 使用兩個 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>
注意，在本例中這個表單可以執行多個活動：現有用戶可以登錄，新用戶可以通過輸入附加賬戶信息進行注冊。使用表單上的 submit 處理函數在這種場景中不能運行，因為它不能確定哪個按鈕觸發表單提交。因此，清單 4 使用 click 處理函數來確定每個按鈕采取什么行動，便于您以后依此處理數據。
清單 4. register.js 中提交按鈕的 Click 處理函數
$(document).ready(function() { $("#register, #login").click(function(e) { var name = ($(event.target).attr('id') == 'register') ? 'Registration' : 'Login'; return e.preventDefault(); });}); 文檔準備好后，您需要為 Register 和 Login 按鈕分配 click 處理函數。click 處理函數接收一個參數，命名為 e（作為事件） 。此事件對象稍后用來預防默認表單提交。正如之前代碼所述。當 click 處理函數被調用時，當前被點擊的對象的 ID 被訪問，用來確定這是一個用戶登錄還是一個新用戶注冊。
現在，您已經知道了使用 jQuery 如何提交表單，我們來看看使用 jQuery 中的 Ajax 和 PHP 如何認證一個用戶。
使用 jQuery 中的 Ajax 功能注冊和認證一個用戶
要認證和注冊一個用戶，您需要一個服務器端語言和一個數據庫。在本文中，服務器端語言是 PHP，數據庫是 MySQL，您不需要使用任何特定的服務器端語言或者數據庫來創建此函數。
首先開始在 JavaScript 文件中編寫附加代碼，使用 Ajax 將表單發送給 PHP 。清單 5 的代碼開始也類似于清單 4 ，因為它包含按鈕的 ready 處理函數和 click 處理函數，而且它確定點擊哪個按鈕。然后，如果消息元素是打開的，您需要使用 slideUp 函數關閉它的。咋一看 Ajax 調用不是很明顯，特別是如果您過去通常不 使用 jQuery 創建 Ajax，因為您通常使用簡寫函數來發送調用，在代碼中甚至都沒提及 Ajax。
清單 5. 使用 jQuery 中的 Ajax 提交一個 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 函數是一個簡寫函數，等價于清單 6 中的代碼。它將文件路徑指向被請求的文件、序列化數據、最后是一個回調函數。用 jQuery 序列化表單數據比較容易：您只需要訪問 form 元素和調用 serialize 功能獲取一個標準查詢字符串?；卣{函數首先通過訪問響應的第一個節點來確定調用是成功還是失?。篜HP 文件以一個名為 success or error 的節點返回結果。狀態確定之后，您就可以從之前的表單提交中刪除 message 元素中留下的任何類。然后添加一個響應成功對應的類。message 元素被附加到聲明成功或錯誤消息的 HTML 后，然后使用 jQuery 的 slideDown 函數打開 message。
清單 6. jQuery Ajax 函數
$.ajax({ type: 'POST', url: url, data: data, success: success dataType: dataType}); 在創建同數據庫交互的 PHP 文件之前，您需要構建您計劃保存新用戶和選擇現有用戶表單的數據庫。清單 7 包含了您需要的 SQL 代碼，來創建名為 ibm_user_auth 的 MySQL 表，其中包括一個 ID，用戶名、密碼、名字、姓、以及 Email 地址。ID 被設置為自動增量并作為主鍵。其他值都是 tinytext 型的，除了密碼，密碼是 varchar(32) 的，因為稍后您將使用它來保存一個消息摘要算法 5（MD5）加密的值。
清單 7. 為用戶創建 MySQL 數據庫表的 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`));
表構建完成之后，您就可以開始編寫與數據庫交互的 PHP 代碼了。您將在您的 Ajax post 函數中調用該文件 — 名為 service.php。清單 8 顯示了構成該文件的代碼。首先定義數據庫連接變量。數據庫信息建立之后，確保用戶名和密碼被通過表單張貼傳遞；如果是這樣，提取張貼數據然后連接到數據庫?，F在您已經連接到數據庫了，需要確定是否使用發送數據來登錄一個已有用戶或注冊他/她作為一個新用戶。您只需要檢查 action 變量是從張貼數據提取的和被 Ajax 表單張貼發送的，就可以確定了。
如果您確定這是一個新用戶注冊，您也需要確定名字、姓和 email 地址已經發送。否則，只能是一個錯誤，當所有需求都滿足之后，確保用戶名不和數據庫中現有的用戶名重復，如果是重復了，也是返回一個錯誤。否則，繼續驗證 email 地址，將新用戶數據庫插入數據庫，然后返回一個成功消息。
如果您確定這是一個現有用戶想要的登錄，確保用戶名是存在數據庫中。如果是，將用戶數據保存到一個會話中，然后返回一個成功消息。
清單 8. 與 JavaScript 代碼和數據庫交互的服務器端 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' />"); }}?> 現在，您已經完成了要點工作，考慮使用性能可能是一個好主意。該代碼最大的問題是如果出現錯誤不能告知用戶是什么錯誤。然而，您可能注意到了，每個錯誤響應包含一個 id 屬性，下一節向您展示如何使用這些值來為每個場景編寫一個錯誤響應，以及在注冊過程中提示用戶名。
在注冊過程中處理錯誤和提示用戶名
此時，使用上述代碼處理錯誤是較為容易的。特別是您已經返回錯誤，且錯誤中含有指向可能出現問題的具體 ID。如果您已經構建了 ID，那么開始添加 PHP 代碼，此代碼用于在返回到 JavaScript 代碼之前提示用戶名。清單 9 提供一個如何根據用戶提交信息創建用戶名暗示的示例 — 本例中是名字和姓。
清單 9. 使用提交的用戶數據創建用戶名提示
// 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' />"); }}?> 注意，在注冊過程中如果用戶名已存在，您可以創建一個包含各種提交用戶名組合數據（構成提示用戶名）的 XML 結構。您甚至可以進一步在返回之前確認用戶名提示不在數據庫中。
使用 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(); });}); 現在，如果返回一個錯誤，您就可以檢查錯誤 ID，而不只是顯示對用戶沒有幫助的默認錯誤消息。首先，從 XML 結構（從 PHP 返回的）中解析 ID，然后使用一個轉換語句直接指向消息或者相關代碼。第一個錯誤 ID 是用于系統中已經存在一個用戶名的情況。這就是您訪問提示用戶名和為用戶展示一個選擇新用戶名的地方。從訪問提示節點開始，遍歷每一個節點。遍歷過程中創建一個單選按鈕和一個包含提示的標簽，然后將它附加到錯誤消息，顯示給用戶。此時，用戶可以選擇一個提示名，該名稱將自動添加到用戶名文本框，然后繼續注冊。
接下來的錯誤 ID 是用于 email 地址驗證的。相關代碼只顯示一個常見錯誤消息，通知用戶發生了什么錯誤。您甚至可以添加一行代碼來突出顯示不正確的字段。下一個是一個常見錯誤系消息，用于登錄失敗時。在本例中，代碼使用了一個較為模糊的消息，考慮到安全原因，您不能告訴任何人那個字段是不正確的。最后，默認消息和您 清單 5 中的是一樣的，該消息可能永遠都不會使用，但是有備無患。
結束語
使用 Ajax 進行用戶認證日益普及，對于單頁面應用程序幾乎是必不可少的。它對于提示用戶名也大有好處，正如本文所述，因為當頁面被提交后，它給用戶一個虛幻的希望，只有出現錯誤時才刷新，這就是說響應更自動化、更用戶友好。同時也提供了一個更好用的 web 體驗。
完整實例代碼點擊此處本站下載。
希望本文所述對大家jQuery程序設計有所幫助。
