PHP 使用 Ajax 异步验证用户名是否已经被使用

落日映苍穹つ 2022-02-21 01:48 392阅读 0赞

##  PHP 使用 Ajax 异步验证用户名是否已经被使用 ##

#### 一、前言 ####

*  在上周的服务器课程中，JJ 老师布置了一个针对 Ajax 的作业，大致的应用场景就是：比如在注册页面，用户注册账户时需要给自己取一个用户名，如果在用户填写完所有的信息点击提交后，服务器才对用户名是否已经被使用进行判断，如果还未被使用就没啥事，那如果被使用了呢？？？页面已经进行了刷新，用户还得重新输入一次所有的信息，用户体验极差。这时候 Ajax 就派上用场了（其实这也是 Ajax 最经典的应用场景之一）。概括来说，有以下几个步骤：
    
     *  1)用户在用户名对应的输入框中输入其用户名
     *  2)当焦点从输入框上移开时，触发一个对应的函数，使用 ajax 将用户名数据传给后端
     *  3)后端根据拿到的用户名在数据库中进行查找，看数据库中是否有相同的用户名，返回给前端
     *  4)前端根据后端返回的数据做出反应，通过警示框或者文本框样式的变化提示用户，重新选择用户名
 *  这里先给出最后完成的效果（我觉得 JJ 布置这个作业的目的就是要让同学理解和掌握 Ajax 的应用逻辑，所以我也就偷了懒，大致实现了这一个业务逻辑，很多细节的地方比如会出现异常的地方都没有进行处理）
    
     *  首先就是数据库，我创建了一个 school 数据库，创建了一个 student 表，表中就两个字段，主键 id，用户名数据 username。并在表中插入了如下几条记录（输入这些用户名就会提示已被使用的信息）：
        
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pfX01heA_size_16_color_FFFFFF_t_70]
     *  效果尝试，我放在了学校的服务器上，需要挂学校的 vpn [传送门][Link 1]
     *  效果展示，录了个 gif 图，比较大，加载比较慢 [传送门][Link 2]
 *  完整代码，包括建表的 sql 文件，放在网盘上，[传送门][Link 3]

#### 二、具体实现 ####

*  业务逻辑懂了的话，实现就不难了，主要的差距就在于一些细节的地方你处理的怎么样以及样式好不好看之类的 (css真滴烦) 。我就简单模拟了一个注册的场景，主要就是侧重于异步验证用户名是否已经被使用，密码等其他信息并没有进行验证以及存储，完整的注册功能没实现，提示用户的方式也就简单的使用警示框，懒得做样式了（用户体验更好的方式是，比如检测到一个用户名已经被使用，就让用户名输入框的边框变为红色，给出文字提示，如此的用户体验极佳，你可以往这个方向尝试）但是我懒得搞 css 了。。。烦人的东西
 *  感觉说了好多废话，现在开始步入正题。首先就是前端的代码，主要就是文本框部分以及 ajax 部分
    
        <input id="user_name" type="text" name="username" value="" placeholder="请输入您的用户名" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的用户名'"/>
 *  这行代码比较长，很多都是样式的东西，那些不用管，主要注意到我给这个输入框指定了 id 为 user\_name，后面就是使用 jQuery 通过这个 id 来监听焦点的移开、获取输入框中的值以及设置输入框中的值
 *  然后看 ajax 部分，这里我就在代码中给出注释吧
    
        // 使用 id 拿到用户名文本框，当它失去焦点（blur函数的作用）的时候触发该函数
        $('#user_name').blur(function () { 
        	// 获取到文本框中的值
            var username = $(this).val();
            if (username == '') { 
                alert('用户名不得为空！'); // 简单限定不能为空
            }
            else { 
            	// 开始使用 ajax
            	// ajax 的使用套路不多，最简单的形式如下
                $.ajax({ 
                	// 设置提交方式为post
                    type: "POST",
                    // 将数据提交给url中指定的php文件
                    url: "confirm_username.php",
                    // 提交的数据内容，以json的形式
                    data: { "user_name": username},
                    // 成功的回调函数，其中的data就是后端返回回来的数据
                    success: function (data) { 
                        // 转化为json形式
                        var data_json = $.parseJSON(data);
                        // 后端的返回数据我指定了两个部分，在后续的php代码中进行讲解
                        if (data_json['flag'] == false) { 
                            alert(data_json['msg']);
                        }
                        else if (data_json['msg'] == 1) { 
                            alert("该用户名已被使用！");
                            $('#user_name').val("");
                        }
                    }
                });
            }
        });
 *  接下来是 PHP 部分的代码，主要就是 confirm\_username.php 文件
    
        <?php
        /** * Created by PhpStorm. * User: jiangnan * Date: 2019/4/9 * Time: 21:48 */
        include_once 'inc/config.inc.php';
        include_once 'inc/mysqli.inc.php';
        ?>
        <?php
        	// 拿到前端post过来的数据
            $username = isset($_POST["user_name"]) ? $_POST["user_name"] : "";
            // 简单判断数据异常的情况
            // 你可以看到我设置的返回数据由来你哥哥部分
            // flag部分大致的作用就是指示后端处理过程有没有发生错误
            // msg部分就是可以存放具体的出错信息等
            if ($username == "") { 
                // 使用exit函数进行返回
                exit(json_encode(array("flag" => false, "msg" => "查询信息错误")));
            }
            // 如果没有出现异常，就进行数据库连接以及查询
            else { 
                $conn = connect();
                $query = "select * from student where username='{ $username}'";
                $result = get_num($conn, $query);
                // $result变量存放了记录数，为0的话就说明数据库中没有该用户名
                // 然后返回给前端的数据中，msg部分说明了数据库中是否有该用户名
                // 0表示没有，1表示有，前端根据这一信息进行相应的处理
                if ($result == 0) { 
                    exit(json_encode(array("flag" => true, "msg" => 0)));
                }
                else { 
                    exit(json_encode(array("flag" => true, "msg" => 1)));
                }
            }
        ?>
 *  你会看到我在 confirm\_username.php 文件中 include 了两个 php 文件，config.inc.php 和 mysqli.inc.php，这是我的个人习惯，把配置信息封装到一个文件 config.inc.php 中；数据库连接以及操作等也封装成几个符合自己习惯的函数，放在 mysqli.inc.php 文件中，用来被 include 。具体可以阅读我的另一篇博客 [传送门][Link 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pfX01heA_size_16_color_FFFFFF_t_70]: /images/20220221/a1598ed9adf44ffd9e54677e6a59992c.png
[Link 1]: http://172.23.131.35/Ajax/
[Link 2]: http://www.jiangnanmax.top/
[Link 3]: https://pan.baidu.com/s/1fJwHrxl8CkabkCr-9XyuLQ
[Link 4]: https://blog.csdn.net/J__Max/article/details/88832542