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


Posted in Javascript onApril 05, 2017

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

页面:

简单的输入框

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

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

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);
  }

测试:

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

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
学习YUI.Ext 第四天--对话框Dialog的使用
Mar 10 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
Jun 25 Javascript
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
用jquery写的菜单从左往右滑动出现
Apr 11 Javascript
js 获取元素下面所有li的两种方法
Apr 14 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
Mar 26 Javascript
js实现上传文件添加和删除文件选择框
Oct 24 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
基于DOM节点删除之empty和remove的区别(详解)
Sep 11 Javascript
javascript如何实现create方法
Nov 04 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
JS二叉树的简单实现方法示例
Apr 05 #Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 #Javascript
js获取指定时间的前几秒
Apr 05 #Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
Apr 05 #Javascript
webpack2.0搭建前端项目的教程详解
Apr 05 #Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 #Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 #Javascript
You might like
网站加速 PHP 缓冲的免费实现方法
2006/10/09 PHP
收集的php编写大型网站问题集
2007/03/06 PHP
php知道与问问的采集插件代码
2010/10/12 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
JavaScript的Cookies
2008/01/16 Javascript
input按钮的事件处理大全
2010/12/10 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
Vue.js学习之计算属性
2017/01/22 Javascript
javascript中apply/call和bind的使用
2017/02/15 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
原生js实现form表单序列化的方法
2018/08/02 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
2019/04/14 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
2019/04/30 Javascript
python类装饰器用法实例
2015/06/04 Python
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
Python自动生产表情包
2017/03/17 Python
Python装饰器简单用法实例小结
2018/12/03 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
Python图像处理库PIL的ImageEnhance模块使用介绍
2020/02/26 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
Champion官网:美国冠军运动服装
2017/01/25 全球购物
酒店节能减排方案
2014/05/26 职场文书
正科级干部考察材料
2014/05/29 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
小学生作文批改评语
2014/12/25 职场文书
四年级数学上册教学计划
2015/01/20 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书
HTML5中 rem适配方案与 viewport 适配问题详解
2021/04/27 HTML / CSS
Python中文纠错的简单实现
2021/07/07 Python