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 相关文章推荐
Jquery 扩展方法
May 06 Javascript
禁用Enter键表单自动提交实现代码
May 22 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
vue深入解析之render function code详解
Jul 18 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 Javascript
Angular4学习笔记之实现绑定和分包
Aug 01 Javascript
Vue组件选项props实例详解
Aug 18 Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 Javascript
react-router-dom 嵌套路由的实现
May 02 Javascript
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常用函数的使用汇总
2013/06/08 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
javascript时区函数介绍
2012/09/14 Javascript
JS实现仿QQ效果的三级竖向菜单
2015/09/25 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
浅谈Vuejs中nextTick()异步更新队列源码解析
2017/12/31 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
详解适配器在JavaScript中的体现
2018/09/28 Javascript
vue子传父关于.sync与$emit的实现
2019/11/05 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
[01:04:39]OG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python和C语言混合编程实例
2014/06/04 Python
浅谈python迭代器
2017/11/08 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
python 的 scapy库,实现网卡收发包的例子
2019/07/23 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
通过cmd进入python的步骤
2020/06/16 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
Gerry Weber德国官网:优质女性时装,德国最大的时装公司之一
2019/11/02 全球购物
外贸学院会计专业应届生求职信
2013/11/14 职场文书
大专生毕业的自我评价
2014/02/06 职场文书
总经理岗位职责说明书
2014/07/30 职场文书
挂职学习心得体会
2014/09/09 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
中学生检讨书范文
2014/11/03 职场文书
幼儿园教师个人总结
2015/02/05 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
2016年教师师德师风承诺书
2016/03/25 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书