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 相关文章推荐
JavaScript网页制作特殊效果用随机数
May 22 Javascript
javascript 仿QQ滑动菜单效果代码
Sep 03 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
May 03 Javascript
jquery attr()设置和获取属性值实例教程
Sep 25 Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 Javascript
基于element-ui的rules中正则表达式
Sep 04 Javascript
Vue起步(无cli)的啊教程详解
Apr 11 Javascript
js canvas实现俄罗斯方块
Oct 11 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 spl_autoload_register实现自动加载研究
2011/12/06 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
js文件中调用js的实现方法小结
2009/10/23 Javascript
jquery select动态加载选择(兼容各种浏览器)
2013/02/01 Javascript
JS中prototype关键字的功能介绍及使用示例
2013/07/21 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
2015/08/07 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
Highcharts入门之简介
2016/08/02 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
2017/10/23 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
Python队列的定义与使用方法示例
2017/06/24 Python
python机器学习库常用汇总
2017/11/15 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
python实现串口自动触发工作的示例
2019/07/02 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
2016/10/23 HTML / CSS
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
建筑施工员岗位职责
2013/11/26 职场文书
写好自荐信需做到的5要点
2014/03/07 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
企业党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
家装电话营销开场白
2015/05/29 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
高三生物教学反思
2016/02/22 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python
JavaScript 实现页面滚动动画
2021/04/24 Javascript