jQuery的Ajax用戶認(rèn)證和注冊技術(shù)實(shí)例教程(附demo源碼)

更新時(shí)間：2015年12月08日 15:28:48 作者：developerWorks 中國

這篇文章主要介紹了jQuery的Ajax用戶認(rèn)證和注冊技術(shù),結(jié)合完整實(shí)例較為詳細(xì)的分析講解了jQuery中ajax方法實(shí)現(xiàn)用戶驗(yàn)證與注冊的相關(guān)技巧與注意事項(xiàng),并附帶了demo源碼供讀者下載,需要的朋友可以參考下

前面介紹了《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ū)ο罅?。更多信息和下載 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)用是成功還是失?。篜HP 文件以一個(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è)會(huì)話中，然后返回一個(gè)成功消息。

清單 8. 與 JavaScript 代碼和數(shù)據(jù)庫交互的服務(wù)器端 PHP 代碼

// Database connection values
define('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 values
define('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)都不會(huì)使用，但是有備無患。

結(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ì)有所幫助。

您可能感興趣的文章: