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继承的实现代码
Aug 05 Javascript
jQuery中removeData()方法用法实例
Dec 27 Javascript
js倒计时抢购实例
Dec 20 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
Oct 05 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
Feb 08 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
Feb 21 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
详谈构造函数加括号与不加括号的区别
Oct 26 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 Javascript
Vue指令指令大全
Feb 09 Javascript
vue中使用[provide/inject]实现页面reload的方法
Sep 30 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&amp;&amp;mysql)四
2006/10/09 PHP
php流量统计功能的实现代码
2012/09/29 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
深入理解javascript prototype的相关知识
2019/09/19 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
[01:05]主宰至宝剑心之遗
2017/03/16 DOTA
[01:05:30]VP vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python&amp;MongoDB爬取图书馆借阅记录
2016/02/05 Python
Python 数据结构之旋转链表
2017/02/25 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2019/02/13 Python
pandas的qcut()方法详解
2019/07/06 Python
python批量处理文件或文件夹
2020/07/28 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
python opencv实现直线检测并测出倾斜角度(附源码+注释)
2020/12/31 Python
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
.net笔试题
2014/03/03 面试题
静态变量和实例变量的区别
2015/07/07 面试题
学生打架检讨书
2014/02/14 职场文书
前处理组长岗位职责
2014/03/01 职场文书
商铺租赁意向书
2014/04/01 职场文书
竞选学生会主席演讲稿
2014/04/24 职场文书
仓库管理计划书
2014/05/04 职场文书
银行求职信怎么写
2014/05/26 职场文书
学校纪律作风整改措施思想汇报
2014/10/11 职场文书
工作失误检讨书(3篇)
2014/10/11 职场文书
冬季作息时间调整通知
2015/04/24 职场文书