Ajax验证用户名或昵称是否已被注册
JavaScript中XMLHttpRequest对象是整个Ajax技术的核心,它提供了异步发送请求的能力 。而用户名或昵称的验证就可以使XMLHttpRequest对象实现。下面是个小例子。
页面:
简单的输入框
<body> 昵称:<input type="text" name="username" ><span id="msg">请输入昵称</span><br> 密码:<input type="password" name="password"> </body>
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, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = 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显示已使用。
原文链接:http://blog.csdn.net/su20145104009/article/details/62056901
(资源库 www.zyku.net)
您可能感兴趣的文章
- 03-30thinkphp5 使用H-ui+ajax 提交数据
- 10-29Linux系统修改终端命令行主机名和用户名颜色的方法
- 11-05JS判断用户名及密码是否为空的方法
- 07-27PHP自定义函数判断是否为Get、Post及Ajax提交的方法
- 07-18使用Ajax方法实现Form表单的提交及注意事项
- 07-18Ajax的特性及乱码问题
- 07-12jQuery+Ajax请求本地数据加载商品列表页并跳转详情页
- 07-07Mysql 5.6添加修改用户名和密码的方法
- 06-26Ajax提交表单并接收json实例代码
- 06-26正则表达式验证用户名、密码、手机号码、身份证(推荐)
- 02-22DedeCMS提高文章内容加载速度的两个小
- 09-19word文档如何更改背景图片
- 04-06vivos9门禁卡开通方法
- 12-07OPPO手机怎么清理内存垃圾
- 02-11小米11私密相册设置教程
- 01-12DEDECMS v5.3 发布图集时不能获取缩略
- 06-18帝国CMS7.5版编辑器升级为CKEditor编
- 04-02Centos查看端口占用情况和开启端口命
- 01-12青苹果影院app-青苹果影院app应用软件
- 01-19帝国CMS-美工手册
最近更新
阅读排行
猜你喜欢
- 01-11二年级下册语文助手-二年级下册语文助
- 04-24PHP 获取当前使用的域名和文件位置
- 03-05帝国CMS删除信息来源超链接和作者超链
- 04-04win7下安装Ubuntu后进不去win7的解决
- 07-05Linux userconf命令
- 07-05Linux ed命令
- 01-18小米k歌插件-小米k歌插件应用软件功能
- 02-23一加9r关闭拨号按键音操作方法
- 04-26帝国CMS当前位置[!--newsnav--]
- 11-03goodnotes恢复默认模板教程介绍