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 汉字字节判断
Aug 01 Javascript
javascript+mapbar实现地图定位
Apr 09 Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 Javascript
深入理解javascript中return的作用
Dec 30 Javascript
a标签的href与onclick事件的区别详解
Nov 12 Javascript
JavaScript实现找质数代码分享
Mar 24 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
vue.js绑定class和style样式(6)
Dec 09 Javascript
AngularJS常见过滤器用法实例总结
Jul 06 Javascript
微信小程序返回多级页面的实现方法
Oct 27 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
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
超全面的vue.js使用总结
2017/02/12 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
详解JavaScript执行模型
2020/11/16 Javascript
mapboxgl实现带箭头轨迹线的代码
2021/01/04 Javascript
[01:07:34]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第二场 1月9日
2021/03/11 DOTA
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
Python Socket使用实例
2017/12/18 Python
python+opencv实现动态物体追踪
2018/01/09 Python
对pandas的算术运算和数据对齐实例详解
2018/12/22 Python
Python常用爬虫代码总结方便查询
2019/02/25 Python
Python将string转换到float的实例方法
2019/07/29 Python
python编写简单端口扫描器
2019/09/04 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
北京天润融通.net面试题笔试题
2012/02/20 面试题
DOM和JQuery对象有什么区别
2016/11/11 面试题
晚宴邀请函范文
2014/01/15 职场文书
给老婆的婚前保证书
2014/02/01 职场文书
高中军训感想300字
2014/03/04 职场文书
三项教育活动实施方案
2014/03/30 职场文书
党员批评与自我批评思想汇报(集锦)
2014/09/14 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
2015年试用期工作总结
2014/12/12 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
SQL中的连接查询详解
2022/06/21 SQL Server