jQuery的Ajax用户认证和注册技术实例教程(附demo源码)_jquery

前面介绍了《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 id="Extra-options-registration-only">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,!#\$%&'\*\+/=\&#63;\^_`\{\|}~-]+(\.[a-z0-9,!#\$%&
  '\*\+/=\&#63;\^_`\{\|}~-]+)*@[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' />");
 }
}
&#63;>

现在，您已经完成了要点工作，考虑使用性能可能是一个好主意。该代码最大的问题是如果出现错误不能告知用户是什么错误。然而，您可能注意到了，每个错误响应包含一个 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,!#\$%&'\*\+/=\&#63;\^_`\{\|}~-]+(\.[a-z0-9,!#\$%&
  '\*\+/=\&#63;\^_`\{\|}~-]+)*@[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' />");
 }
}
&#63;>

注意，在注册过程中如果用户名已存在，您可以创建一个包含各种提交用户名组合数据（构成提示用户名）的 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程序设计有所帮助。