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


Posted in Javascript onDecember 08, 2015

前面介绍了《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>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程序设计有所帮助。

Javascript 相关文章推荐
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
使用jQuery的将桌面应用程序引入浏览器
Nov 19 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
Feb 12 Javascript
Angularjs---项目搭建图文教程
Jul 08 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
Nov 25 Javascript
浅谈js键盘事件全面控制
Dec 01 Javascript
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
vue组件实现弹出框点击显示隐藏效果
Oct 26 Javascript
解决JavaScript layui 下拉框不显示的问题
Aug 14 Javascript
JS大坑之19位数的Number型精度丢失问题详解
Apr 22 Javascript
JavaScript回调函数callback用法解析
Jan 14 Javascript
vue实现移动端div拖动效果
Mar 03 Vue.js
jquery+ajax实现注册实时验证实例详解
Dec 08 #Javascript
jQuery使用$.ajax进行即时验证的方法
Dec 08 #Javascript
基于JavaScript创建动态Dom
Dec 08 #Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
Dec 08 #Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 #Javascript
js实现兼容IE、Firefox的图片缩放代码
Dec 08 #Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 #Javascript
You might like
PHP中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
固定表格行列(expression)在IE下适用
2013/07/25 Javascript
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
2014/10/29 Javascript
js中document.write的那点事
2014/12/12 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
2016/05/25 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
js使用html2canvas实现屏幕截取的示例代码
2017/08/28 Javascript
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
webpack打包js的方法
2018/03/12 Javascript
JS装饰器函数用法总结
2018/04/21 Javascript
vue项目上传Github预览的实现示例
2018/11/06 Javascript
ES6的Fetch异步请求的实现方法
2018/12/07 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
2020/09/01 Javascript
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
python3使用QQ邮箱发送邮件
2020/05/20 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
解决python 找不到module的问题
2020/02/12 Python
HTML5图片预览实例分享
2014/06/04 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
2016/03/22 HTML / CSS
美国最大的农村生活方式零售店:Tractor Supply Company(TSC)
2017/05/15 全球购物
荷兰本土平价百货:HEMA
2017/10/23 全球购物
Vrbo英国:预订度假屋
2020/08/19 全球购物
What is the purpose of Void class? Void类的作用是什么?
2016/10/31 面试题
如何用JQuery进行表单验证
2013/05/29 面试题
国旗下的演讲稿
2014/05/08 职场文书
办公室主任岗位职责
2015/01/31 职场文书
2019消防宣传标语!
2019/07/10 职场文书