Ajax验证用户名或昵称是否已被注册

本文主要介绍了Ajax验证用户名或昵称是否已被注册的实例方法。具有很好的参考价值。

JavaScript中XMLHttpRequest对象是整个Ajax技术的核心，它提供了异步发送请求的能力。而用户名或昵称的验证就可以使XMLHttpRequest对象实现。下面是个小例子。

页面：
简单的输入框：

<body>昵称：<input type="text" name="username" ><span id="msg">请输入昵称</span><br>密码：<input type="password" name="password"></body>

https://files.jb51.net/file_images/article/201704/2017040514140120.jpg
JS代码如下：

window.onload=function(){var nameElement=document.getElementsByName("username")[0];//为昵称选项注册onblur事件nameElement.onblur=function(){var name=this.value;//1.获取XMLHttpRequest对象var req=getXMLHttpRequest();//4.处理响应结果req.onreadystatechange=function(){if(req.readyState==4){//XMLHttpRequest对象读取成功if(req.status==200){//服务器相应正常var msg=document.getElementById("msg");//根据返回的结果显示不同的信息if(req.responseText=="true"){msg.innerHTML="<font color='red'>该昵称已注册</font>";}else{msg.innerHTML="<font color='green'>可以使用</font>";}}}}//2.建立一个连接req.open("get","${pageContext.request.contextPath}/servlet/checkUserServlet?name="+name);//3.发送get请求req.send(null);}}

getElementsByName方法，根据浏览器的不同获得不同的XMLHttpRequest对象（提供异步发送请求的能力）：

function getXMLHttpRequest(){var xmlhttp;if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp = new XMLHttpRequest();} else {// code for IE6, IE5xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}return xmlhttp;
}

servlet：仅仅为了测试，并没有真正从dao层查询

public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {PrintWriter pw=response.getWriter();String name=request.getParameter("name");//判断昵称是否已被使用if("tom".equals(name)){pw.print(true);}else{pw.print(false);}}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doGet(request, response);}

测试：

由于在servlet中我们只验证tom是否存在，所以tom显示已使用。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

Ajax验证用户名或昵称是否已被注册相关推荐

asp.net 用户注册怎么判断用户名是否重复 ajax,AJAX_asp.net结合Ajax验证用户名是否存在的代码，1，使用JavaScript js文件，验证 - phpStudy...
asp.net结合Ajax验证用户名是否存在的代码 1, 使用JavaScript js文件,验证用户名是否存在复制代码代码如下: var ajax = function(option) { va ...
ajax 用户验证js,js ajax验证用户名
回答 jQuery的ajax 验证用户名的例子/验证用户名 js 方法 uname:输入的用户名 function ajax_check_uname(uname){ var url='/check/u ...
利用ajax验证用户名,3.6.2 利用Ajax验证注册用户名（1）
3.6.2 利用Ajax验证注册用户名(1) 由于注册的用户比较多,如果能在客户端还没提交注册表单之前验证用户名是否可用,如果不可用则禁止提交,这样将大大减少网络流量和服务器负载.本节将介绍如何利用 ...
利用jQuery实现的Ajax 验证用户名是否存在
异步刷新实现方式有多种,也可以借助JS的多种框架,下面是使用jQuery框架实现的AJAX 验证用户名是否存在 jQuery.ajax概述 HTTP 请求加载远程数据. 通过jQuery 底层 AJA ...
asp.net AJAX 验证用户名是否存在 -Jquery
异步刷新实现方式有多种,也可以借助JS的多种框架,下面是使用JQuery框架实现的AJAX 验证用户名是否存在 jQuery.ajax概述 HTTP 请求加载远程数据. 通过jQuery 底层 AJA ...
html ajax验证用户名密码,AJAX实现注册验证用户名
本文实例为大家分享了AJAX实现注册验证用户名的具体代码,供大家参考,具体内容如下功能说明当用户在注册页面输入用户名并且鼠标焦点离开输入框时,到数据表中去验证该用户名是否已经存在,如果存在提示不可 ...
ajax校验用户名可用吗,基于jQuery实现Ajax验证用户名是否可用实例
本文实例为大家分享了jQuery ajax简单案例-验证用户名是否可用的具体代码,供大家参考,具体内容如下 HTML Insert title here //页面加载完成后 $(function() ...
jquery ajax mysql登录_ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库...
1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在如果使用ajax一定是要有1个处理页面的,处理页面只是操作数据库并且返回 ...
php注册验证用户名已存在,php ajax注册验证用户名是否存在代码_PHP教程
php ajax注册验证用户名是否存在代码这是注册程序是一款当用户输入完用户名是,就会自动去数据库中查询用户要注册的用户名是否己经被注册了,如果是返回提示否则提示可以注册. php教程 ajax注册 ...

Ajax验证用户名或昵称是否已被注册

Ajax验证用户名或昵称是否已被注册相关推荐

最新文章

热门文章