AJax基于JavaScript实现注册时局部判断用户名是否已被使用

最新推荐文章于 2025-05-19 09:28:05 发布

Mr.Yanis

最新推荐文章于 2025-05-19 09:28:05 发布

阅读量2.1k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： JavaScript与jQuery JSP 文章标签： javascript ajax

本文链接：https://blog.youkuaiyun.com/pyy542718473/article/details/70161738

JSP 同时被 2 个专栏收录

10 篇文章

订阅专栏

JavaScript与jQuery

6 篇文章

订阅专栏

本文介绍了一个简单的JavaScript脚本，用于实现在用户输入用户名时通过Ajax技术实时检查用户名是否已被使用。当用户更改输入框中的内容时，脚本会自动向服务器发送请求验证用户名的有效性，并在页面上显示反馈结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script type="text/javascript" >
	var xhr;//声明变量
	//声明一个创建XMLHttpRequest对象的函数
	function getXMLHttpRequest() {
		if (window.XMLHttpRequest) {
			return new XMLHttpRequest;
		}
	}
	function userInput(textName) {
		//获取文本框的值
		var userName = textName.value;
		//调用getXMLHttpRequest函数创建XMLHttpRequest对象
		xhr = getXMLHttpRequest();
		//设置回调函数
		xhr.onreadystatechange = getResult;
		//封装函数
		xhr.open("GET", "StudentServlet?userName=" + userName, true);
		//发送请求
		xhr.send(null);
	}
	//回调函数，data表示从服务器返回来的数据
	function getResult() {
		//获取span框
		var span = document.getElementById("span");
		//判断服务端是否成功返回数据
		if (xhr.readyState == 4 && xhr.status == 200) {
			//接收并处理服务端返回来的数据
			if (xhr.responseText == "y") {
				span.style.color = "green";
				span.innerHTML = "恭喜！该用户名可用！";
			} else {
				span.style.color = "red";
				span.innerHTML = "该用户名已被使用！请重新输入";
			}
		}
	}
</script>

效果截图：Ps：用户名的数据来源于数据库

当填写用户名把鼠标移开后就能判断用户名是否已被使用。

当用户名可以使用时：