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

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

一、前言

• 在上周的服务器课程中，JJ 老师布置了一个针对 Ajax 的作业，大致的应用场景就是：比如在注册页面，用户注册账户时需要给自己取一个用户名，如果在用户填写完所有的信息点击提交后，服务器才对用户名是否已经被使用进行判断，如果还未被使用就没啥事，那如果被使用了呢？？？页面已经进行了刷新，用户还得重新输入一次所有的信息，用户体验极差。这时候 Ajax 就派上用场了（其实这也是 Ajax 最经典的应用场景之一）。概括来说，有以下几个步骤：

  • 1)用户在用户名对应的输入框中输入其用户名

  • 2)当焦点从输入框上移开时，触发一个对应的函数，使用 ajax 将用户名数据传给后端

  • 3)后端根据拿到的用户名在数据库中进行查找，看数据库中是否有相同的用户名，返回给前端

  • 4)前端根据后端返回的数据做出反应，通过警示框或者文本框样式的变化提示用户，重新选择用户名

• 这里先给出最后完成的效果（我觉得 JJ 布置这个作业的目的就是要让同学理解和掌握 Ajax 的应用逻辑，所以我也就偷了懒，大致实现了这一个业务逻辑，很多细节的地方比如会出现异常的地方都没有进行处理）

  • 首先就是数据库，我创建了一个 school 数据库，创建了一个 student 表，表中就两个字段，主键 id，用户名数据 username。并在表中插入了如下几条记录（输入这些用户名就会提示已被使用的信息）：

    

  • 效果尝试，我放在了学校的服务器上，需要挂学校的 vpn 传送门

  • 效果展示，录了个 gif 图，比较大，加载比较慢 传送门

• 完整代码，包括建表的 sql 文件，放在网盘上，传送门

二、具体实现

• 业务逻辑懂了的话，实现就不难了，主要的差距就在于一些细节的地方你处理的怎么样以及样式好不好看之类的 (css真滴烦) 。我就简单模拟了一个注册的场景，主要就是侧重于异步验证用户名是否已经被使用，密码等其他信息并没有进行验证以及存储，完整的注册功能没实现，提示用户的方式也就简单的使用警示框，懒得做样式了（用户体验更好的方式是，比如检测到一个用户名已经被使用，就让用户名输入框的边框变为红色，给出文字提示，如此的用户体验极佳，你可以往这个方向尝试）但是我懒得搞 css 了。。。烦人的东西

• 感觉说了好多废话，现在开始步入正题。首先就是前端的代码，主要就是文本框部分以及 ajax 部分

  <input id="user_name" type="text" name="username" value="" placeholder="请输入您的用户名" onfocus="this.placehold