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

梦里梦外; 2023-10-17 12:34 13阅读 0赞

<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：用户名的数据来源于数据库

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

当用户名可以使用时：

![SouthEast][]

当用户名存在时：

![SouthEast 1][]

[SouthEast]: https://img-blog.csdn.net/20170413202713294?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcHl5NTQyNzE4NDcz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 1]: https://img-blog.csdn.net/20170413202722863?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcHl5NTQyNzE4NDcz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

发表评论取消回复

表情：

评论列表（有 0 条评论，13人围观）

还没有评论，来说两句吧...

相关阅读

相关 AJAX使用前端校验用户名是否已被使用------AJAX

> <!DOCTYPE html> > <html lang="en" id="myHtml"> > <head> > <meta ch

淡淡的烟草味﹌/ 2024年02月18日 10:13/ 0 赞/ 52 阅读

相关 AJAX连接后台数据库检验用户名是否已被使用------AJAX

> package com.bjpowernode.AJAX.servlet; > > import com.bjpowernode.oa.utils

淩亂°似流年/ 2024年02月18日 10:13/ 0 赞/ 70 阅读

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

上篇博文已经写过一篇基于JavaScript来实现的功能的了，但是由于通过JavaScript来实现的话，代码量相对较大，而且容易出错，所以一般使用jQuery来实现，具体

小咪咪/ 2023年10月17日 12:34/ 0 赞/ 60 阅读

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

<script type="text/javascript" > var xhr;//声明变量 //声明一个创建XMLHttpRequest对象的函

梦里梦外;/ 2023年10月17日 12:34/ 0 赞/ 14 阅读

相关实时提示待注册用户名是否已注册

XmlHttp参考手册： [https://www.jb51.net/shouce/xmlhttp/][https_www.jb51.net_shouce_xmlhttp]

朱雀/ 2023年08月17日 17:10/ 0 赞/ 142 阅读

相关 php+jquery/JAVASCRIPT判断用户名是否存在

[![Center][]][Center 1] 更多技术问题解决案例请访问：IT[摆渡网][Center 1] \-- 一个IT实时在线问答平台,解决任何IT技术难题，

小鱼儿/ 2022年06月14日 11:23/ 0 赞/ 293 阅读

相关使用Ajax动态判断用户名是否存在。

简介ajax: AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是

蔚落/ 2022年06月07日 23:15/ 0 赞/ 292 阅读

相关 java-web+AJAX 使用案例（注册验证账号是否被注册）

AJAX 使用案例（注册验证账号是否被注册）在下面的案例中本人没有实际到数据库中查询，只是在Servlet设置一个值 abc，如果用户提交过来的账号也是abc，那么就任务该

不念不忘少年蓝@/ 2022年06月07日 07:07/ 0 赞/ 216 阅读

相关 PHP 使用 Ajax 异步验证用户名是否已经被使用

PHP 使用 Ajax 异步验证用户名是否已经被使用一、前言在上周的服务器课程中，JJ 老师布置了一个针对 Ajax 的作业，大致的应用场景就是：比如在

落日映苍穹つ/ 2022年02月21日 01:48/ 0 赞/ 337 阅读

相关 Ajax实现的验证用户名是否被注册？

用户名是否被注册 AJAX实现 1. 页面：`user.jsp` 给出注册表单页面。给用户名文本框添加onblur事件的监听。获取文本框的内容，通过aj

偏执的太偏执、/ 2021年06月22日 15:36/ 0 赞/ 512 阅读