使用jquery ajax 实现用户的用户名注册验证，如果该用户已存在则提示该用户已存在

jQuery AJAX 基本使用方法

接口使用 http://180.76.117.80:8080/AjaxSever/JSONServlet，
用ajax实现获取该接口内容的功能，
并借此判断用户名是否唯一性，
ajax验证在用户名输入框失去焦点以后触发，

实现效果展示

用户名被占用

用户名为空

注册成功

控制台返回输出

代码如下

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>使用ajax实现判断用户名是否存在</title><script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script><style type="text/css">#yan{color: #FF0000;font-size: 10px;}</style></head><body><div class="" id="name"><span>用户名：</span><input type="text" id="user" name="username" placeholder="请输入用户名" /><label id="yan"></label></div><!-- <div><button type="submit" id="sub">检测</button></div> --><div id="suc"></div><script type="text/javascript">var user = $("#user").val();$(function(){// 事件 ，输入框 失去焦点触发 $("#user").blur(function(){var user = $("#user").val();// 获取输入框内的内容console.log(user);$.ajax({url:"http://180.76.117.80:8080/AjaxSever/JSONServlet",type: "get",async: true,dataType : 'json',success: function (data) {console.log(data);console.log(data.students);// 判断输入框为空if (user == ''){$("#yan").text("用户名不能为空");$("#suc").text("");}else{for(var i=0;i<data.students.length;i++){let num = data.students[i].username;console.info(num);if(num == user){$("#yan").text("用户名已被占用");$("#suc").text("");break;}else{$("#suc").text("用户注册成功");$("#yan").text("");// break;};};}},// 如果请求失败要运行的函数error: function () {},});// });});</script></body>
</html>

以上便是本篇博客文章的所有内容
如果该文章对你的学习有所帮助和启发
还请点赞支持一下
谢谢~

使用jquery ajax 实现用户的用户名注册验证，如果该用户已存在则提示该用户已存在相关推荐

使用ajax 实现用户的用户名注册验证，如果该用户已存在则提示该用户已存在
MyJsp.jsp 代码: <%@ page language="java" import="java.util.*" pageEncoding=&q ...
php ajax邮箱,PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
前言直接上代码有点不厚道.于是按照天朝传统,整段描述吧....(本人语言表达能力有限,大家忍着看) 功能在网站注册用户时使用,主要为了无刷新异步验证用户输入的用户名或者Email是否已注册. ...
servlet+JQuery ajax以json的形式的验证表单小实例
JQuery $.ajax() $.ajax({type: 'POST', //请求方式一般是get,posturl: url , // 这是必需的,规定把请求发送到哪个 URLdata: data ...
阿里短信 ajax,阿里大于短信注册验证 ajax返回数据的问题
使用阿里大于的sdk做注册时的手机验证码发送. 前台ui页面手机号: 发送验证码 function sendphone(){ // 获取input的值 $phone=$('#examplephone ...
Jquery Ajax 登录，服务端分别为 aspx,ashx,asmx
Jquery Ajax 登录,服务端分别为 aspx,ashx,asmx 原文: http://www.cnblogs.com/StudyLife/archive/2012/02/22/2363174 ...
用python写注册登录界面web_用Python实现web端用户登录和注册功能
这篇文章主要介绍了用Python实现web端用户登录和注册功能的教程,需要的朋友可以参考下用户管理是绝大部分Web网站都需要解决的问题.用户管理涉及到用户注册和登录. 用户注册相对简单,我们可以先通 ...
jQuery+Ajax+Mysql 检测用户名注册时是否重名
利用jQuery框架,封装了底层的Ajax异步技术,通过简单的方法调用即可实现.这篇博客是针对用户注册时出现的用户名重名问题的自动检测,利用的技术是Ajax异步传输. register.jsp 注册显 ...
ajax注册表单用户名实时验证,Ajax注册表单用户名实时验证..doc
Ajax注册表单用户名实时验证. Ajax注册表单用户名实时验证 1.1.1 摘要很多时候在网站上注册时,我们会发现,注册表单通常需要检查用户名和电子邮件地址的可用性:从而确保用户之间不拥有相同的用 ...
ajax重名检测,jQuery+Ajax实现用户名重名实时检测
利用jQuery框架,封装了底层的Ajax异步技术,通过简单的方法调用即可实现.这篇博客是针对用户注册时出现的用户名重名问题的自动检测,利用的技术是Ajax异步传输. register.jsp 注册显 ...

使用jquery ajax 实现用户的用户名注册验证，如果该用户已存在则提示该用户已存在

使用jquery ajax 实现用户的用户名注册验证，如果该用户已存在则提示该用户已存在

实现效果展示

使用jquery ajax 实现用户的用户名注册验证，如果该用户已存在则提示该用户已存在相关推荐

最新文章

热门文章