jQuery的Ajax用戶認證和注冊技術(shù)實例教程(附demo源碼)
前面介紹了《jquery+ajax注冊實時驗證》及《jQuery使用$.ajax進行即時驗證的方法》。這里進一步總結(jié)了jQuery的Ajax用戶認證和注冊技術(shù)。分享給大家供大家參考，具體如下：
Ajax 表單提交是一個功能強大的技術(shù)，提供一種發(fā)送 web 表單的方法，無需重載瀏覽器窗口。jQuery 庫讓您使用 Ajax 表單提交功能進一步提供一個方便快捷的方法，以少量代碼生成可用 Ajax 的 Web 表單。在本文中，學(xué)習(xí)如何使用 jQuery 創(chuàng)建基礎(chǔ) Ajax 表單提交，以及如何使用該技術(shù)驗證一個用戶。本文使用 jQuery 演示了 Ajax 用戶注冊技術(shù)，比如，檢查用戶名可用性，以及當(dāng)選擇的用戶名已存在時提示用戶名。既不需要表單提交也無需頁面重載。
如果您對 jQuery 不是很熟悉，它本質(zhì)上是一個 JavaScript 庫，使 JavaScript 開發(fā)變得很容易。它使所需的代碼量最小化，因為它有許多內(nèi)置功能，這樣您就不再需要為這些功能編寫客戶端函數(shù)或?qū)ο罅恕８嘈畔⒑拖螺d jQuery 庫的鏈接，可參見本站相關(guān)資料；或者，如您在所有代碼樣例中看到的那樣，可以直接嵌入 jQuery 庫的當(dāng)前版本。
使用 jQuery 進行表單提交
無需重載即可提交一個表單在很多場景中都是很有用的。例如，有了它，您就可以在提交表單之前使用 JavaScript 代碼驗證表單字段，來在一個單頁面應(yīng)用程序中提交表單或者 — 如本文所示— 確定是否用戶名已經(jīng)注冊過。使用 jQuery 觸發(fā)一個表單提交有兩種方法：使用 submit 處理函數(shù)或 click 處理函數(shù)。清單 1 顯示了如何使用 submit 處理函數(shù)提交一個表單。
清單 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>
這兩個清單基本上是一樣的：它們都是嵌入 jQuery 庫的，在訪問任何元素之前使用 ready 處理函數(shù)確認頁面被加載，處理函數(shù)包括相同的代碼。惟一的不同是處理函數(shù)和分配給處理函數(shù)的元素。submit 處理函數(shù)需要分配一個表單元素，而 click 處理函數(shù)，任何可點擊的元素即可 — 本例中是 Submit 按鈕。為了避免提交表單時刷新頁面，您必須使用 preventDefault 函數(shù)。要訪問 preventDefault 函數(shù)，您必須傳遞處理函數(shù)（即使作為一個參數(shù)）或者使用它訪問該函數(shù)。
盡管以上兩種選擇都是有效的，但 submit 處理函數(shù)更為常用些。然而，有些情況下，您可能又不止一個 Submit 按鈕，這就需要每個按鈕一個 click 處理函數(shù)。清單 3 展示了這樣一個必須使用 click 處理函數(shù)的場景，因為兩個 Submit 按鈕都能觸發(fā)表單提交。
清單 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>
注意，在本例中這個表單可以執(zhí)行多個活動：現(xiàn)有用戶可以登錄，新用戶可以通過輸入附加賬戶信息進行注冊。使用表單上的 submit 處理函數(shù)在這種場景中不能運行，因為它不能確定哪個按鈕觸發(fā)表單提交。因此，清單 4 使用 click 處理函數(shù)來確定每個按鈕采取什么行動，便于您以后依此處理數(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ù)接收一個參數(shù)，命名為 e（作為事件） 。此事件對象稍后用來預(yù)防默認表單提交。正如之前代碼所述。當(dāng) click 處理函數(shù)被調(diào)用時，當(dāng)前被點擊的對象的 ID 被訪問，用來確定這是一個用戶登錄還是一個新用戶注冊。
現(xiàn)在，您已經(jīng)知道了使用 jQuery 如何提交表單，我們來看看使用 jQuery 中的 Ajax 和 PHP 如何認證一個用戶。
使用 jQuery 中的 Ajax 功能注冊和認證一個用戶
要認證和注冊一個用戶，您需要一個服務(wù)器端語言和一個數(shù)據(jù)庫。在本文中，服務(wù)器端語言是 PHP，數(shù)據(jù)庫是 MySQL，您不需要使用任何特定的服務(wù)器端語言或者數(shù)據(jù)庫來創(chuàng)建此函數(shù)。
首先開始在 JavaScript 文件中編寫附加代碼，使用 Ajax 將表單發(fā)送給 PHP 。清單 5 的代碼開始也類似于清單 4 ，因為它包含按鈕的 ready 處理函數(shù)和 click 處理函數(shù)，而且它確定點擊哪個按鈕。然后，如果消息元素是打開的，您需要使用 slideUp 函數(shù)關(guān)閉它的。咋一看 Ajax 調(diào)用不是很明顯，特別是如果您過去通常不 使用 jQuery 創(chuàng)建 Ajax，因為您通常使用簡寫函數(shù)來發(fā)送調(diào)用，在代碼中甚至都沒提及 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 函數(shù)是一個簡寫函數(shù)，等價于清單 6 中的代碼。它將文件路徑指向被請求的文件、序列化數(shù)據(jù)、最后是一個回調(diào)函數(shù)。用 jQuery 序列化表單數(shù)據(jù)比較容易：您只需要訪問 form 元素和調(diào)用 serialize 功能獲取一個標(biāo)準(zhǔn)查詢字符串?；卣{(diào)函數(shù)首先通過訪問響應(yīng)的第一個節(jié)點來確定調(diào)用是成功還是失?。篜HP 文件以一個名為 success or error 的節(jié)點返回結(jié)果。狀態(tài)確定之后，您就可以從之前的表單提交中刪除 message 元素中留下的任何類。然后添加一個響應(yīng)成功對應(yīng)的類。message 元素被附加到聲明成功或錯誤消息的 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)建您計劃保存新用戶和選擇現(xiàn)有用戶表單的數(shù)據(jù)庫。清單 7 包含了您需要的 SQL 代碼，來創(chuàng)建名為 ibm_user_auth 的 MySQL 表，其中包括一個 ID，用戶名、密碼、名字、姓、以及 Email 地址。ID 被設(shè)置為自動增量并作為主鍵。其他值都是 tinytext 型的，除了密碼，密碼是 varchar(32) 的，因為稍后您將使用它來保存一個消息摘要算法 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ù)庫?，F(xiàn)在您已經(jīng)連接到數(shù)據(jù)庫了，需要確定是否使用發(fā)送數(shù)據(jù)來登錄一個已有用戶或注冊他/她作為一個新用戶。您只需要檢查 action 變量是從張貼數(shù)據(jù)提取的和被 Ajax 表單張貼發(fā)送的，就可以確定了。
如果您確定這是一個新用戶注冊，您也需要確定名字、姓和 email 地址已經(jīng)發(fā)送。否則，只能是一個錯誤，當(dāng)所有需求都滿足之后，確保用戶名不和數(shù)據(jù)庫中現(xiàn)有的用戶名重復(fù)，如果是重復(fù)了，也是返回一個錯誤。否則，繼續(xù)驗證 email 地址，將新用戶數(shù)據(jù)庫插入數(shù)據(jù)庫，然后返回一個成功消息。
如果您確定這是一個現(xiàn)有用戶想要的登錄，確保用戶名是存在數(shù)據(jù)庫中。如果是，將用戶數(shù)據(jù)保存到一個會話中，然后返回一個成功消息。
清單 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)完成了要點工作，考慮使用性能可能是一個好主意。該代碼最大的問題是如果出現(xiàn)錯誤不能告知用戶是什么錯誤。然而，您可能注意到了，每個錯誤響應(yīng)包含一個 id 屬性，下一節(jié)向您展示如何使用這些值來為每個場景編寫一個錯誤響應(yīng)，以及在注冊過程中提示用戶名。
在注冊過程中處理錯誤和提示用戶名
此時，使用上述代碼處理錯誤是較為容易的。特別是您已經(jīng)返回錯誤，且錯誤中含有指向可能出現(xiàn)問題的具體 ID。如果您已經(jīng)構(gòu)建了 ID，那么開始添加 PHP 代碼，此代碼用于在返回到 JavaScript 代碼之前提示用戶名。清單 9 提供一個如何根據(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)建一個包含各種提交用戶名組合數(shù)據(jù)（構(gòu)成提示用戶名）的 XML 結(jié)構(gòu)。您甚至可以進一步在返回之前確認用戶名提示不在數(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)在，如果返回一個錯誤，您就可以檢查錯誤 ID，而不只是顯示對用戶沒有幫助的默認錯誤消息。首先，從 XML 結(jié)構(gòu)（從 PHP 返回的）中解析 ID，然后使用一個轉(zhuǎn)換語句直接指向消息或者相關(guān)代碼。第一個錯誤 ID 是用于系統(tǒng)中已經(jīng)存在一個用戶名的情況。這就是您訪問提示用戶名和為用戶展示一個選擇新用戶名的地方。從訪問提示節(jié)點開始，遍歷每一個節(jié)點。遍歷過程中創(chuàng)建一個單選按鈕和一個包含提示的標(biāo)簽，然后將它附加到錯誤消息，顯示給用戶。此時，用戶可以選擇一個提示名，該名稱將自動添加到用戶名文本框，然后繼續(xù)注冊。
接下來的錯誤 ID 是用于 email 地址驗證的。相關(guān)代碼只顯示一個常見錯誤消息，通知用戶發(fā)生了什么錯誤。您甚至可以添加一行代碼來突出顯示不正確的字段。下一個是一個常見錯誤系消息，用于登錄失敗時。在本例中，代碼使用了一個較為模糊的消息，考慮到安全原因，您不能告訴任何人那個字段是不正確的。最后，默認消息和您 清單 5 中的是一樣的，該消息可能永遠都不會使用，但是有備無患。
結(jié)束語
使用 Ajax 進行用戶認證日益普及，對于單頁面應(yīng)用程序幾乎是必不可少的。它對于提示用戶名也大有好處，正如本文所述，因為當(dāng)頁面被提交后，它給用戶一個虛幻的希望，只有出現(xiàn)錯誤時才刷新，這就是說響應(yīng)更自動化、更用戶友好。同時也提供了一個更好用的 web 體驗。
完整實例代碼點擊此處本站下載。
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要為大家詳細介紹了jquery實現(xiàn)抽獎功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要介紹了基于編寫jQuery的無縫滾動插件實現(xiàn)代碼,需要的朋友可以參考下2014-08-08
本文以示例的方式為大家介紹下jquery sortable的拖動方法的具體實現(xiàn)，感興趣的朋友可以參考下2014-01-01
jQuery實現(xiàn)鼠標(biāo)滾輪動態(tài)改變樣式或效果
這篇文章主要介紹了jQuery實現(xiàn)鼠標(biāo)滾輪動態(tài)改變樣式或效果,需要的朋友可以參考下2015-01-01
這篇文章主要為大家詳細介紹了jquery無縫圖片輪播組件封裝，支持自動輪播，手動輪播，無縫銜接，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-02-02
jQuery實現(xiàn)Twitter的自動文字補齊特效
本文介紹了一款jQuery實現(xiàn)的文字自動補全特效的插件，該插件可以結(jié)合本地數(shù)據(jù)進行一些操作。推薦關(guān)注一下H5的幾種數(shù)據(jù)存儲的方式（localstorage與sessionstorage、IndexedDB、離線緩存manifest文件）2014-11-11
jQuery動態(tài)添加及刪除表單上傳元素的方法(附demo源碼下載)
這篇文章主要介紹了jQuery動態(tài)添加及刪除表單上傳元素的方法,涉及jQuery的事件動態(tài)綁定及頁面元素動態(tài)操作技巧,并附帶了demo源碼供讀者下載參考,代碼非常簡潔實用,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了jQuery中:first選擇器用法,實例分析了:first選擇器的功能、定義及匹配元素時的使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
jQuery插件FusionCharts繪制的2D雙柱狀圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制的2D雙柱狀圖效果,結(jié)合實例形式分析了jQuery使用FusionCharts插件繪制2D雙柱狀圖的具體步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-05-05
漢化英文版的Dreamweaver CS5并自動提示jquery
如果從Adobe Dreamweaver CS5的官網(wǎng)上下載了一個Adobe Dreamweaver CS5，那么Adobe Dreamweaver CS5默認你是英文版的，我們中國人還是比較習(xí)慣看漢字的。2010-11-11