1200字范文 > 使用jquery ajax 实现用户的用户名注册验证如果该用户已存在则提示该用户已存在

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

时间：2023-03-14 07:50:39

使用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 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>

以上便是本篇博客文章的所有内容

如果该文章对你的学习有所帮助和启发

还请点赞支持一下

谢谢~

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。