$(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 />"); } // Validate email if( !preg_match("^[a-z0-9,!#\$%&'\*\+/=\?\^_`\{\|}~-]+(\.[a-z0-9,!#\$%& '\*\+/=\?\^_`\{\|}~-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*\.([a-z]{2,})$^", $_POST['email']) ) { die("<error />"); } 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 属性，下一节向您展示如何使用这些值来为每个场景编写一个错误响应，以及在注册过程中提示用户名。

在注册过程中处理错误和提示用户名

此时，使用上述代码处理错误是较为容易的。特别是您已经返回错误，且错误中含有指向可能出现问题的具体 ID。如果您已经构建了 ID，那么开始添加 PHP 代码，此代码用于在返回到 JavaScript 代码之前提示用户名。清单 9 提供一个如何根据用户提交信息创建用户名暗示的示例 — 本例中是名字和姓。

清单 9. 使用提交的用户数据创建用户名提示