Ajax用戶認證與註冊使用詳解
- php中世界最好的语言原創
- 2018-04-25 15:03:051741瀏覽
這次帶給大家Ajax用戶認證與註冊使用詳解，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> <p id="container"> <p id="message"></p> <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> </p>
注意，在本例中這個表單可以執行多個活動：現有使用者可以登錄，新使用者可以透過輸入附加帳戶資訊進行註冊。使用表單上的 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 中的是一样的，该消息可能永远都不会使用，但是有备无患。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是Ajax用戶認證與註冊使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！