杰晶网络

jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
网络编程 2024/9/1 佚名
3 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 处理函数提交表单

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


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


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





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


这两个清单基本上是一样的：它们都是嵌入 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注册技术

                                     

                            

                        

                        

                            

                                免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
                                如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
                            

                        

                        

                            
                            
                        

                        
                        
                        
                    

                    

                        

                            

                                

                                    

                                        

                                    

                                    

                                        

                                            
                                        

                                    

                                

                                

                                    
www.imxmx.com
                                            
                                                杰晶网络 
                                    

                                    

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                    

                                    

                                    

                                        

                                            8,675无损音乐
                                        

                                        

                                            1,324高清电影
                                        

                                        

                                            213破解软件
                                        

                                        

                                            120,141站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新动态

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接