jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
前面介绍了《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处理函数提交表单
<scripttype="text/javascript"src="http://code.jquery.com/jquery.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$('#submitForm').submit(function(e){
alert($('#sample').attr('value'));
returne.preventDefault();
});
});
</script>
<formid="submitForm"method="post">
<inputtype="text"name="sample"id="sample"value="Entersomething"/>
<inputtype="submit"id="submitBtn"value="Submit"/>
</form>
使用click处理函数提交表单：
清单2.使用jQuery的click处理函数提交表单
<scripttype="text/javascript"
src="http://code.jquery.com/jquery.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$('#submitBtn').click(function(e){
alert($('#sample').attr('value'));
returne.preventDefault();
});
});
</script>
<formid="submitForm"method="post">
<inputtype="text"name="sample"id="sample"value="Entersomething"/>
<inputtype="submit"id="submitBtn"value="Submit"/>
</form>
这两个清单基本上是一样的：它们都是嵌入jQuery库的，在访问任何元素之前使用ready处理函数确认页面被加载，处理函数包括相同的代码。惟一的不同是处理函数和分配给处理函数的元素。submit处理函数需要分配一个表单元素，而click处理函数，任何可点击的元素即可—本例中是Submit按钮。为了避免提交表单时刷新页面，您必须使用preventDefault函数。要访问preventDefault函数，您必须传递处理函数（即使作为一个参数）或者使用它访问该函数。
尽管以上两种选择都是有效的，但submit处理函数更为常用些。然而，有些情况下，您可能又不止一个Submit按钮，这就需要每个按钮一个click处理函数。清单3展示了这样一个必须使用click处理函数的场景，因为两个Submit按钮都能触发表单提交。
清单3.使用两个submit按钮提交表单
<scripttype="text/javascript" src="http://code.jquery.com/jquery.js"></script> <scripttype="text/javascript"src="register.js"></script> <divid="container"> <divid="message"></div> <formmethod="post"id="mainform"> <labelfor="username">Username</label> <inputtype="text"name="username"id="username"value=""/> <labelfor="password">Password</label> <inputtype="password"name="password"value=""/> <inputtype="submit"name="action"id="login"value="Login"/> <h2>Extraoptions(registrationonly)</h2> <labelfor="firstname">Firstname</label> <inputtype="text"name="firstname"value=""/> <labelfor="lastname">Lastname</label> <inputtype="text"name="lastname"value=""/> <labelfor="email">Email</label> <inputtype="text"name="email"value=""/> <inputtype="submit"name="action"id="register"value="Register"/> </form> </div>
注意，在本例中这个表单可以执行多个活动：现有用户可以登录，新用户可以通过输入附加账户信息进行注册。使用表单上的submit处理函数在这种场景中不能运行，因为它不能确定哪个按钮触发表单提交。因此，清单4使用click处理函数来确定每个按钮采取什么行动，便于您以后依此处理数据。
清单4.register.js中提交按钮的Click处理函数
$(document).ready(function(){
$("#register,#login").click(function(e){
varname=($(event.target).attr('id')=='register')?'Registration':'Login';
returne.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){
varname=($(event.target).attr('id')=='register')?'Registration':'Login';
$('#message').slideUp('fast');
$.post('service.php',$('#mainform').serialize()
+'&action='+$(event.target).attr('id'),function(data){
varcode=$(data)[0].nodeName.toLowerCase();
$('#message').removeClass('error');
$('#message').removeClass('success');
$('#message').addClass(code);
if(code=='success'){
$('#message').html(name+'wassuccessful.');
}
elseif(code=='error'){
$('#message').html('Anerroroccurred,pleasetryagain.');
}
$('#message').slideDown('fast');
});
returne.preventDefault();
});
});
post函数是一个简写函数，等价于清单6中的代码。它将文件路径指向被请求的文件、序列化数据、最后是一个回调函数。用jQuery序列化表单数据比较容易：您只需要访问form元素和调用serialize功能获取一个标准查询字符串。回调函数首先通过访问响应的第一个节点来确定调用是成功还是失败：PHP文件以一个名为successorerror的节点返回结果。状态确定之后，您就可以从之前的表单提交中删除message元素中留下的任何类。然后添加一个响应成功对应的类。message元素被附加到声明成功或错误消息的HTML后，然后使用jQuery的slideDown函数打开message。
清单6.jQueryAjax函数
$.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代码
CREATETABLE`ibm_user_auth`( `id`int(11)NOTNULLAUTO_INCREMENT, `username`tinytextNOTNULL, `password`varchar(32)NOTNULL, `firstname`tinytextNOTNULL, `lastname`tinytextNOTNULL, `email`tinytextNOTNULL, PRIMARYKEY(`id`) );
表构建完成之后，您就可以开始编写与数据库交互的PHP代码了。您将在您的Ajaxpost函数中调用该文件—名为service.php。清单8显示了构成该文件的代码。首先定义数据库连接变量。数据库信息建立之后，确保用户名和密码被通过表单张贴传递；如果是这样，提取张贴数据然后连接到数据库。现在您已经连接到数据库了，需要确定是否使用发送数据来登录一个已有用户或注册他/她作为一个新用户。您只需要检查action变量是从张贴数据提取的和被Ajax表单张贴发送的，就可以确定了。
如果您确定这是一个新用户注册，您也需要确定名字、姓和email地址已经发送。否则，只能是一个错误，当所有需求都满足之后，确保用户名不和数据库中现有的用户名重复，如果是重复了，也是返回一个错误。否则，继续验证email地址，将新用户数据库插入数据库，然后返回一个成功消息。
如果您确定这是一个现有用户想要的登录，确保用户名是存在数据库中。如果是，将用户数据保存到一个会话中，然后返回一个成功消息。
清单8.与JavaScript代码和数据库交互的服务器端PHP代码
//Databaseconnectionvalues
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'])){
//Verifythattheusernameisunique
$query=mysql_query("selectcount(id)
fromibm_user_authwhereusername='$username'");
$result=mysql_fetch_row($query);
if($result[0]>0){
die("<errorid='0'/>");
}
//Validateemail
if(!preg_match("^[a-z0-9,!#\$%&'\*\+/=\?\^_`\{\|}~-]+(\.[a-z0-9,!#\$%&
'\*\+/=\?\^_`\{\|}~-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*\.([a-z]{2,})$^",
$_POST['email'])){
die("<errorid='1'/>");
}
mysql_query("insertintoibm_user_auth
(username,password,firstname,lastname,email)
VALUES('$username',MD5('$password'),'$firstname','$lastname','$email')");
die("<success/>");
}
elseif($action=='login'){
$query=mysql_query("selectcount(id)fromibm_user_authwhere
username='$username'andpassword=md5('$password')");
$result=mysql_fetch_row($query);
if($result[0]==1){
session_start();
$_SESSION['username']=$username;
die("<success/>");
}
elsedie("<errorid='2'/>");
}
}
?>
现在，您已经完成了要点工作，考虑使用性能可能是一个好主意。该代码最大的问题是如果出现错误不能告知用户是什么错误。然而，您可能注意到了，每个错误响应包含一个id属性，下一节向您展示如何使用这些值来为每个场景编写一个错误响应，以及在注册过程中提示用户名。
在注册过程中处理错误和提示用户名
此时，使用上述代码处理错误是较为容易的。特别是您已经返回错误，且错误中含有指向可能出现问题的具体ID。如果您已经构建了ID，那么开始添加PHP代码，此代码用于在返回到JavaScript代码之前提示用户名。清单9提供一个如何根据用户提交信息创建用户名暗示的示例—本例中是名字和姓。
清单9.使用提交的用户数据创建用户名提示
//Databaseconnectionvalues
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'])){
//Verifythattheusernameisunique
$query=mysql_query("selectcount(id)
fromibm_user_authwhereusername='$username'");
$result=mysql_fetch_row($query);
if($result[0]>0){
$out="<errorid='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);
}
//Validateemail
if(!preg_match("^[a-z0-9,!#\$%&'\*\+/=\?\^_`\{\|}~-]+(\.[a-z0-9,!#\$%&
'\*\+/=\?\^_`\{\|}~-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*\.([a-z]{2,})$^",
$_POST['email'])){
die("<errorid='1'/>");
}
mysql_query("insertintoibm_user_auth
(username,password,firstname,lastname,email)
VALUES('$username',MD5('$password'),'$firstname','$lastname','$email')");
die("<success/>");
}
elseif($action=='login'){
$query=mysql_query("selectcount(id)fromibm_user_auth
whereusername='$username'
andpassword=md5('$password')");
$result=mysql_fetch_row($query);
if($result[0]==1){
session_start();
$_SESSION['username']=$username;
die("<success/>");
}
elsedie("<errorid='2'/>");
}
}
?>
注意，在注册过程中如果用户名已存在，您可以创建一个包含各种提交用户名组合数据（构成提示用户名）的XML结构。您甚至可以进一步在返回之前确认用户名提示不在数据库中。
使用jQuery显示提示信息
清单10.使用jQuery显示提示用户名
$(document).ready(function(){
$("#register,#login").click(function(e){
varname=($(event.target).attr('id')=='register')?'Registration':'Login';
$('#message').slideUp('fast');
$.post('service.php',
$('#mainform').serialize()+'&action='+$(event.target).attr('id'),
function(data){
varcode=$(data)[0].nodeName.toLowerCase();
$('#message').removeClass('error');
$('#message').removeClass('success');
$('#message').addClass(code);
if(code=='success'){
$('#message').html(name+'wassuccessful.');
}
elseif(code=='error'){
varid=parseInt($(data).attr('id'));
switch(id){
case0:
$('#message').html('Thisusernamehasalreadybeentaken.
Trysomeofthesesuggestions:');
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);
$('#messageforminput[type="radio"]').click(function(){
$('#username').val($(this).attr('value'));
});
break;
case1:
$('#message').html('Thee-mailenteredisinvalid.');
break;
case2:
$('#message').html('Theusernameorpasswordyouenteredwasinvalid.');
break;
default:
$('#message').html('Anerroroccurred,pleasetryagain.');
}
}
$('#message').slideDown('fast');
});
returne.preventDefault();
});
});
现在，如果返回一个错误，您就可以检查错误ID，而不只是显示对用户没有帮助的默认错误消息。首先，从XML结构（从PHP返回的）中解析ID，然后使用一个转换语句直接指向消息或者相关代码。第一个错误ID是用于系统中已经存在一个用户名的情况。这就是您访问提示用户名和为用户展示一个选择新用户名的地方。从访问提示节点开始，遍历每一个节点。遍历过程中创建一个单选按钮和一个包含提示的标签，然后将它附加到错误消息，显示给用户。此时，用户可以选择一个提示名，该名称将自动添加到用户名文本框，然后继续注册。
接下来的错误ID是用于email地址验证的。相关代码只显示一个常见错误消息，通知用户发生了什么错误。您甚至可以添加一行代码来突出显示不正确的字段。下一个是一个常见错误系消息，用于登录失败时。在本例中，代码使用了一个较为模糊的消息，考虑到安全原因，您不能告诉任何人那个字段是不正确的。最后，默认消息和您清单5中的是一样的，该消息可能永远都不会使用，但是有备无患。
结束语
使用Ajax进行用户认证日益普及，对于单页面应用程序几乎是必不可少的。它对于提示用户名也大有好处，正如本文所述，因为当页面被提交后，它给用户一个虚幻的希望，只有出现错误时才刷新，这就是说响应更自动化、更用户友好。同时也提供了一个更好用的web体验。
完整实例代码点击此处本站下载。
希望本文所述对大家jQuery程序设计有所帮助。