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 UI AutoComplete 自动完成使用小记
Aug 21 Javascript
Jquery中dialog属性小记
Sep 03 Javascript
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
IE的事件传递-event.cancelBubble示例介绍
Jan 12 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 Javascript
Jquery on绑定的事件 触发多次实例代码
Dec 08 Javascript
AngularJS监听路由变化的方法
Mar 07 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
Nov 20 Javascript
React中this丢失的四种解决方法
Mar 12 Javascript
Vue实现日历小插件
Jun 26 Javascript
VUE递归树形实现多级列表
Jul 15 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+SQLite存储方案
2010/09/04 PHP
javascript css在IE和Firefox中区别分析
2009/02/18 Javascript
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
js获取网页高度(详细整理)
2012/12/28 Javascript
使用jQuery判断IE浏览器版本的代码
2014/06/14 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
详解如何用webpack打包一个网站应用项目
2017/07/12 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
vue 实现tab切换保持数据状态
2020/07/21 Javascript
Python实现提取文章摘要的方法
2015/04/21 Python
详解Python发送邮件实例
2016/01/10 Python
简单了解Django模板的使用
2017/12/20 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
python使用turtle库绘制树
2018/06/25 Python
Django 查询数据库并返回页面的例子
2019/08/12 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
使用CSS3来实现滚动视差效果的教程
2015/08/24 HTML / CSS
意大利自行车商店:Cingolani Bike Shop
2019/09/03 全球购物
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
SQL Server笔试题
2012/01/10 面试题
动态密码技术
2012/10/18 面试题
社区庆八一活动方案
2014/02/02 职场文书
支部书记四风问题对照检查材料
2014/10/04 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
辩护词范文大全
2015/05/21 职场文书
详解redis分布式锁的这些坑
2021/05/19 Redis
python非标准时间的转换
2021/07/25 Python
一文搞懂Python Sklearn库使用
2021/08/23 Python
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python