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

最新推荐文章于 2023-04-10 06:00:00 发布

无良小老板

最新推荐文章于 2023-04-10 06:00:00 发布

阅读量1.8k

点赞数 5

分类专栏： jQuery 文章标签： ajax jquery javascript json

本文链接：https://blog.csdn.net/yuyunbai0917/article/details/122479248

版权

jQuery 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

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

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

无良小老板

关注

5
点赞
踩
22

收藏

觉得还不错? 一键收藏
打赏
3
评论
使用jquery ajax 实现用户的用户名注册验证，如果该用户已存在则提示该用户已存在

使用jquery ajax 实现用户的用户名注册验证，如果该用户已存在则提示该用户已存在jQuery AJAX 基本使用方法接口使用 http://180.76.117.80:8080/AjaxSever/JSONServlet，用ajax实现获取该接口内容的功能，并借此判断用户名是否唯一性，ajax验证在用户名输入框失去焦点以后触发，实现效果展示用户名被占用用户名为空注册成功控制台返回输出代码如下<!DOCTYPE html><html> &lt
复制链接

扫一扫