jQuery實現簡單的文件上傳進度條效果
647
2024-03-20
前面介紹了《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="http://www.gimoo.net/t/1904/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 功能獲取一個標準查詢字符串。回調函數首先通過訪問響應的第一個節點來確定調用是成功還是失敗：PHP 文件以一個名為 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 顯示了構成該文件的代碼。首先定義數據庫連接變量。數據庫信息建立之后，確保用戶名和密碼被通過表單張貼傳遞；如果是這樣，提取張貼數據然后連接到數據庫。現在您已經連接到數據庫了，需要確定是否使用發送數據來登錄一個已有用戶或注冊他/她作為一個新用戶。您只需要檢查 action 變量是從張貼數據提取的和被 Ajax 表單張貼發送的，就可以確定了。
如果您確定這是一個新用戶注冊，您也需要確定名字、姓和 email 地址已經發送。否則，只能是一個錯誤，當所有需求都滿足之后，確保用戶名不和數據庫中現有的用戶名重復，如果是重復了，也是返回一個錯誤。否則，繼續驗證 email 地址，將新用戶數據庫插入數據庫，然后返回一個成功消息。
如果您確定這是一個現有用戶想要的登錄，確保用戶名是存在數據庫中。如果是，將用戶數據保存到一個會話中，然后返回一個成功消息。
清單 8. 與 JavaScript 代碼和數據庫交互的服務器端 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' />");
}
}
?>
現在，您已經完成了要點工作，考慮使用性能可能是一個好主意。該代碼最大的問題是如果出現錯誤不能告知用戶是什么錯誤。然而，您可能注意到了，每個錯誤響應包含一個 id 屬性，下一節向您展示如何使用這些值來為每個場景編寫一個錯誤響應，以及在注冊過程中提示用戶名。
在注冊過程中處理錯誤和提示用戶名
此時，使用上述代碼處理錯誤是較為容易的。特別是您已經返回錯誤，且錯誤中含有指向可能出現問題的具體 ID。如果您已經構建了 ID，那么開始添加 PHP 代碼，此代碼用于在返回到 JavaScript 代碼之前提示用戶名。清單 9 提供一個如何根據用戶提交信息創建用戶名暗示的示例 — 本例中是名字和姓。
清單 9. 使用提交的用戶數據創建用戶名提示
// 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' />");
}
}
?>
注意，在注冊過程中如果用戶名已存在，您可以創建一個包含各種提交用戶名組合數據（構成提示用戶名）的 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程序設計有所幫助。
