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

网络编程 2024/11/16 佚名

3 1 2

前面介绍了《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 处理函数提交表单

使用 click 处理函数提交表单：

清单 2. 使用 jQuery 的 click 处理函数提交表单

这两个清单基本上是一样的：它们都是嵌入 jQuery 库的，在访问任何元素之前使用 ready 处理函数确认页面被加载，处理函数包括相同的代码。惟一的不同是处理函数和分配给处理函数的元素。submit 处理函数需要分配一个表单元素，而 click 处理函数，任何可点击的元素即可 — 本例中是 Submit 按钮。为了避免提交表单时刷新页面，您必须使用 preventDefault 函数。要访问 preventDefault 函数，您必须传递处理函数（即使作为一个参数）或者使用它访问该函数。

尽管以上两种选择都是有效的，但 submit 处理函数更为常用些。然而，有些情况下，您可能又不止一个 Submit 按钮，这就需要每个按钮一个 click 处理函数。清单 3 展示了这样一个必须使用 click 处理函数的场景，因为两个 Submit 按钮都能触发表单提交。

清单 3. 使用两个 submit 按钮提交表单

<script type="text/javascript" 
 src="/UploadFiles/2021-04-02/jquery.js">

注意，在本例中这个表单可以执行多个活动：现有用户可以登录，新用户可以通过输入附加账户信息进行注册。使用表单上的 submit 处理函数在这种场景中不能运行，因为它不能确定哪个按钮触发表单提交。因此，清单 4 使用 click 处理函数来确定每个按钮采取什么行动，便于您以后依此处理数据。
清单 4. register.js 中提交按钮的 Click 处理函数


$(document).ready(function() {
 $("#register, #login").click(function(e) {
 var name = ($(event.target).attr('id') == 'register') "htmlcode">

$(document).ready(function() {
 $("#register, #login").click(function(e) {
 var name = ($(event.target).attr('id') == 'register') "htmlcode">

$.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,!#\$%&'\*\+/=\", 
  $_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' />");
 }
}
"htmlcode">

// 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,!#\$%&'\*\+/=\", 
  $_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' />");
 }
}
"htmlcode">

$(document).ready(function() {
 $("#register, #login").click(function(e) {
 var name = ($(event.target).attr('id') == 'register') "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程序设计有所帮助。

                                
                                
                                    jQuery,Ajax,用户认证,注册技术,Ajax用户认证,Ajax注册技术 
                                华山资源网 Design By www.eoogi.com
                            
                        
                        
                            
                                广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）

                                免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
                            
                        
                        
                            
                                
                                    上一篇
                                    jQuery基于ajax()使用serialize()提交form数据的方法
                                
                            
                            
                                
                                    下一篇
                                    jquery+ajax实现注册实时验证实例详解
                                
                            
                        
                        
                        华山资源网 Design By www.eoogi.com
                        
                            
                                
                                
                                    评论“jQuery的Ajax用户认证和注册技术实例教程(附demo源码)”
                                
                            
                            
                                
                                    
                                        
                                            
                                                
                                                    
                                                
                                                
                                                    
                                                
                                                
                                                    
                                                    
                                                    
                                                
                                                
                                                     再想想
                                                    
                                                    
                                                    
                                                    
                                                    
                                                
                                            
                                            
                                        
                                    
                                    
                                    
                                        暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

2024年11月16日

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

jQuery基于ajax()使用serialize()提交form数据的方法

jquery+ajax实现注册实时验证实例详解

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

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存