Ajax使用原生态JS验证用户名是否存在


Posted in Javascript onMay 26, 2020

本文实例为大家分享了JS验证用户名是否存在的具体代码,供大家参考,具体内容如下

直接上代码:

reg_ajax.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax请求servlet实现用户名是否存在验证</title>
</head>
<body>

 <script type="text/javascript">

  /** 
   * 得到XMLHttpRequest对象 
   */
  function getajaxHttp() {
   var xmlHttp;
   try {
    // Firefox, Opera 8.0+, Safari 
    xmlHttp = new XMLHttpRequest();
   } catch (e) {
    // Internet Explorer 
    try {
     xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
     try {
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
     } catch (e) {
      alert("您的浏览器不支持AJAX!");
      return false;
     }
    }
   }
   return xmlHttp;
  }
  /** 
   * 发送ajax请求 
   * url--请求到服务器的URL 
   * methodtype(post/get) 
   * con (true(异步)|false(同步)) 
   * functionName(回调方法名,不需要引号,这里只有成功的时候才调用) 
   * (注意:这方法有二个参数,一个就是xmlhttp,一个就是要处理的对象) 
   */
  function ajaxrequest(url, methodtype, con, functionName) {
   //获取XMLHTTPRequest对象
   var xmlhttp = getajaxHttp();
   //设置回调函数(响应的时候调用的函数)
   xmlhttp.onreadystatechange = function() {
    //这个函数中的代码在什么时候被XMLHTTPRequest对象调用?
    //当服务器响应时,XMLHTTPRequest对象会自动调用该回调方法
    if (xmlhttp.readyState == 4) {
     if (xmlhttp.status == 200) {
      functionName(xmlhttp.responseText);
     }
    }
   };
   //创建请求
   xmlhttp.open(methodtype, url, con);
   //发送请求
   xmlhttp.send();
  }
  function checkUsername() {
   var username=document.getElementById('username').value;
   //调用ajax请求Servlet
   ajaxrequest("userServlet?username="+username,"POST",true,ckUsernameResponse);
  }
  function ckUsernameResponse(responseContents){
   if (responseContents=='yes') {
    document.getElementById('usernameMsg').innerHTML="<font color='red'>用户名存在</font>";
    document.getElementById('username').style="background-color: red";
   }else{
    document.getElementById('usernameMsg').innerHTML="";
    document.getElementById('username').style="background-color: white";
   }
  }

 </script>

 <table>
  <tr>
   <td>用户名</td>
   <td><input type="text" id="username" onblur="checkUsername()"/></td>
   <td><div id="usernameMsg"></div></td>
  </tr>
  <tr>
   <td>邮箱</td>
   <td><input type="text" id="email" /></td>
   <td><div id="emailMsg"></div></td>
  </tr>
 </table>


</body>
</html>

请求的Servlet代码如下,UserServlet.java

package cn.bestchance.servlet;

import java.io.IOException;
import java.util.ArrayList;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class UserServlet
 */
@WebServlet("/userServlet")
public class UserServlet extends HttpServlet {
 private static final long serialVersionUID = 1L;


 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  doPost(request, response);
 }

 /**
  * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
  */
 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  String username=request.getParameter("username");
  //这里使用ArrayList代替从数据库中查询数据
  ArrayList<String> userList =new ArrayList<String>();
  userList.add("admin");
  userList.add("test");
  userList.add("chance");
  //验证用户名是否存在
  boolean flag = false;
  for (String string : userList) {
   if(string.equals(username)){
    flag = true;
    break;
   }
  }
  if(flag){//用户名已存在
   response.getWriter().print("yes");
  }else{//用户名不存在
   response.getWriter().print("no");
  }
 }

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js获取内联样式的方法
Jan 27 Javascript
javascript实现模拟时钟的方法
May 13 Javascript
javaScript中with函数用法实例分析
Jun 08 Javascript
基于jquery实现轮播焦点图插件
Mar 31 Javascript
jQuery如何封装输入框插件
Aug 19 Javascript
JS如何生成一个不重复的ID的函数
Dec 25 Javascript
JQuery和HTML5 Canvas实现弹幕效果
Jan 04 Javascript
防止重复发送 Ajax 请求
Feb 15 Javascript
微信小程序日期时间选择器使用方法
Feb 01 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
Dec 11 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
vue中uni-app 实现小程序登录注册功能
Oct 12 Javascript
jQuery子元素过滤选择器用法示例
Sep 09 #Javascript
老生常谈JQuery data方法的使用
Sep 09 #Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 #Javascript
jQuery内容过滤选择器用法示例
Sep 09 #Javascript
Vue.js动态组件解析
Sep 09 #Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 #Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 #Javascript
You might like
PHP生成HTML静态页面实例代码
2008/08/31 PHP
php文档更新介绍
2011/07/22 PHP
使用新浪微博API的OAuth认证发布微博实例
2015/03/27 PHP
php文件扩展名判断及获取文件扩展名的N种方法
2015/09/12 PHP
PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF
2016/02/19 PHP
js获取单选按钮的数据
2006/11/27 Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
2010/10/11 Javascript
用js实现in_array的方法
2013/11/05 Javascript
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
Jquery.Form 异步提交表单的简单实例
2014/03/03 Javascript
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
jQuery图片左右滚动代码 有左右按钮实例
2016/06/20 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
vue+element表格导出为Excel文件
2019/09/26 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
跟老齐学Python之使用Python操作数据库(1)
2014/11/25 Python
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
Python实现简单多线程任务队列
2016/02/27 Python
Python实现递归遍历文件夹并删除文件
2016/04/18 Python
Python实现多线程HTTP下载器示例
2017/02/11 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
python打包成so文件过程解析
2019/09/28 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
如何让Java程序执行效率更高
2014/06/25 面试题
新闻专业应届生求职信
2013/10/31 职场文书
法制宣传口号
2014/06/16 职场文书
贫困证明模板(3篇)
2014/09/16 职场文书
nginx访问报403错误的几种情况详解
2022/07/23 Servers