Ajax实现注册界面对用户名判定是否重复

前言:这是接上一篇博客,对Ajax在注册界面对用户名的判重的Demo。Ajax实现了局部刷新效果,避免了整体重载。

效果图
  1. 数据库中存储的数据
    在这里插入图片描述
  2. 测试输入已存在的用户名
    在这里插入图片描述
  3. 测试输入未存在的用户名
    在这里插入图片描述
  4. 目录结构
    在这里插入图片描述
代码中涉及的有参考意义的部分
  1. 如何对聚合sql,比如查总记录数,某一列的合,某个记录是否存在进行结果的存储
  2. Ajax在使用post方式时,如何提交参数
代码分享
  1. 项目本身和sql文件可以在我的资源中找到,网址:https://download.csdn.net/download/qq_36654606/10938570

  2. 项目写时候使用的是工具版本:
    2.1 JDK 1.7
    2.2 Tomcat 7.0
    2.3 Navicat 10.0

  3. 可能出现的错误
    3.1 如果出现项目无法运行,请检你的 eclipse 运行该项目时候默认的工具版本。
    3.2 如果数据更改错误,请检查 c3p0.xml 中账号密码是否修改正确。
    3.3 如果项目出现中文乱码,请检查eclipse默认编码格式是否为UTF-8。

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是使用 Ajax 实现判断表单中用户名是否存在的代码示例: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>判断用户名是否存在</title> </head> <body> <form> <label for="username">用户名:</label> <input type="text" id="username" name="username"> <span id="tip"></span> <br> <input type="submit" value="提交"> </form> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(function() { $('#username').on('blur', function() { var username = $(this).val(); $.ajax({ type: 'POST', url: 'check_username.php', data: {username: username}, dataType: 'json', success: function(res) { if (res.code === 200) { $('#tip').text('用户名已存在'); } else { $('#tip').text('用户名可用'); } }, error: function() { alert('请求失败'); } }); }); }); </script> </body> </html> ``` 上面的代码中,我们使用了 jQuery 库来简化 Ajax 请求的操作。当用户在用户名输入框中输入完毕后,我们通过 `blur` 事件来触发 Ajax 请求。在 Ajax 请求中,我们将用户名通过 POST 请求发送到 `check_username.php` 文件中进行处理。如果用户名已经存在,那么我们返回一个 JSON 格式的数据,其中 `code` 字段为 `200`,表示用户名已存在;否则 `code` 字段为 `0`,表示用户名可用。在 Ajax 请求成功后,我们通过 `success` 回调函数来处理返回的数据,根据返回的 `code` 字段来判断用户名是否可用,并将提示信息显示在页面中。如果 Ajax 请求失败,那么我们通过 `error` 回调函数来弹出提示框。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值