Ajax对用户名进行验证

最新推荐文章于 2021-03-31 00:53:06 发布
最新推荐文章于 2021-03-31 00:53:06 发布
阅读量383 收藏
点赞数
分类专栏： Web启示录 [基础篇] 文章标签： Ajax Web前端 互联网
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29025139/article/details/46795849
版权



//JSP页面部分： 
   
   

    
    

     
     <%@ page language="java"  pageEncoding="utf-8"%>
    
    

    
    

     
      
    
    

    
    

     
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    

    
    

     
     <html>
    
    

    
    

     
     	<head>
    
    

    
    

     
     		<title>校验用户名是否存在</title>
    
    

    
    

     
     		
    
    

    
    

     
     	</head>
    
    

    
    

     
     	<body>
    
    

    
    

     
     	<center>
    
    

    
    

     
     	<form action=""  enctype="application/x-www-form-urlencoded">
    
    

    
    

     
     		<h3>请填写用户注册信息</h3>
    
    

    
    

     
     		<table  border="1">
    
    

    
    

     
     			<tr>
    
    

    
    

     
     				<td>用户名:</td>
    
    

    
    

     
     				<td><input type="text" name="username" value="" id="username">
    
    

    
    

     
     				  <div id="divcheck"></div>
    
    

    
    

     
     				  <input type="button" name="checkusername" value="查看用户名" id="checkusername"></td>
    
    

    
    

     
     			</tr>
    
    

    
    

     
     			<tr>
    
    

    
    

     
     				<td>密码:</td>
    
    

    
    

     
     				<td><input type="password" name="psw" value=""></td>
    
    

    
    

     
     			</tr>
    
    

    
    

     
     			<tr>
    
    

    
    

     
     				<td>确认密码:</td>
    
    

    
    

     
     				<td><input type="password" name="confpsw" value=""></td>
    
    

    
    

     
     			</tr>
    
    

    
    

     
     			<tr>
    
    

    
    

     
     				<td>出生日期:</td>
    
    

    
    

     
     				<td><input type="text" name="birthday" value=""></td>
    
    

    
    

     
     			</tr>
    
    

    
    

     
     		</table>
    
    

    
    

     
     		 </form>
    
    

    
    

     
     		 </center>
    
    

    
    

     
     		 <script type="text/javascript">
    
    

    
    

     
     		 	window.onload=function(){
    
    

    
    

     
     		 		document.getElementById("checkusername").onclick=function(){
    
    

    
    

     
     		 			var xhr = createXmlHttpRequest();
    
    

    
    

     
     		 			xhr.onreadystatechange=function(){
    
    

    
    

     
     		 				if(xhr.readyState==4){
    
    

    
    

     
     		 					if(xhr.status==200||xhr.status==304){
    
    

    
    

     
     		 						var data = xhr.responseText;
    
    

    
    

     
     		 						document.getElementById("divcheck").innerHTML=data;
    
    

    
    

     
     		 					}
    
    

    
    

     
     		 				}
    
    

    
    

     
     		 			}
    
    

    
    

     
     		 			xhr.open("POST","${pageContext.request.contextPath}/servlet/ServletDemo3?time="+new Date().getTime());
    
    

    
    

     
     		 			
    
    

    
    

     
     		 			xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    
    

    
    

     
     		 			
    
    

    
    

     
     		 			var username = document.getElementById("username").value;
    
    

    
    

     
     		 			
    
    

    
    

     
     		 			xhr.send("username="+username);
    
    

    
    

     
     		 		}
    
    

    
    

     
     		 	}
    
    

    
    

     
     		 	function createXmlHttpRequest(){
    
    

    
    

     
     				   var xmlHttp;
    
    

    
    

     
     				   try{    //Firefox, Opera 8.0+, Safari
    
    

    
    

     
     						   xmlHttp=new XMLHttpRequest();
    
    

    
    

     
     					}catch (e){
    
    

    
    

     
     						   try{    //Internet Explorer
    
    

    
    

     
     								  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    
    

    
    

     
     							}catch (e){
    
    

    
    

     
     								  try{
    
    

    
    

     
     										  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    
    

    
    

     
     								  }catch (e){}  
    
    

    
    

     
     						   }
    
    

    
    

     
     					}
    
    

    
    

     
     				   return xmlHttp;
    
    

    
    

     
     				 }
    
    

    
    

     
     		 </script>
    
    

    
    

     
     	</body>
    
    

    
    

     
     	
    
    

    
    

     
     </html>


//servlet部分： 
   
   

    
    

     
     package cn.itcast.controller;
    
    

    
    

     
      
    
    

    
    

     
     import java.io.IOException;
    
    

    
    

     
     import java.io.PrintWriter;
    
    

    
    

     
      
    
    

    
    

     
     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 ServletDemo3
    
    

    
    

     
      */
    
    

    
    

     
     @WebServlet("/servlet/ServletDemo3")
    
    

    
    

     
     public class ServletDemo3 extends HttpServlet {
    
    

    
    

     
     	private static final long serialVersionUID = 1L;
    
    

    
    

     
       
    
    

    
    

     
     	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    

    
    

     
     		response.setContentType("text/html;charset=UTF-8");
    
    

    
    

     
     		PrintWriter out = response.getWriter();
    
    

    
    

     
     		String username = request.getParameter("username");
    
    

    
    

     
     		System.out.println(username);
    
    

    
    

     
     		if(username.equals("sa")){
    
    

    
    

     
     			out.write("用户名已经存在");
    
    

    
    

     
     		}else{
    
    

    
    

     
     			out.write("用户名可以使用");
    
    

    
    

     
     		}
    
    

    
    

     
     	}
    
    

    
    

     
      
    
    

    
    

     
     	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    

    
    

     
     		doGet(request,response);
    
    

    
    

     
     	}
    
    

    
    

     
      
    
    

    
    

     
     }


//JSP页面部分： 
    
    

     
     

      
      <%@ page language="java"  pageEncoding="utf-8"%>
     
     

     
     

      
       
     
     

     
     

      
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
     
     

     
     

      
      <html>
     
     

     
     

      
      	<head>
     
     

     
     

      
      		<title>校验用户名是否存在</title>
     
     

     
     

      
      		
     
     

     
     

      
      	</head>
     
     

     
     

      
      	<body>
     
     

     
     

      
      	<center>
     
     

     
     

      
      	<form action=""  enctype="application/x-www-form-urlencoded">
     
     

     
     

      
      		<h3>请填写用户注册信息</h3>
     
     

     
     

      
      		<table  border="1">
     
     

     
     

      
      			<tr>
     
     

     
     

      
      				<td>用户名:</td>
     
     

     
     

      
      				<td><input type="text" name="username" value="" id="username">
     
     

     
     

      
      				  <div id="divcheck"></div>
     
     

     
     

      
      				  <input type="button" name="checkusername" value="查看用户名" id="checkusername"></td>
     
     

     
     

      
      			</tr>
     
     

     
     

      
      			<tr>
     
     

     
     

      
      				<td>密码:</td>
     
     

     
     

      
      				<td><input type="password" name="psw" value=""></td>
     
     

     
     

      
      			</tr>
     
     

     
     

      
      			<tr>
     
     

     
     

      
      				<td>确认密码:</td>
     
     

     
     

      
      				<td><input type="password" name="confpsw" value=""></td>
     
     

     
     

      
      			</tr>
     
     

     
     

      
      			<tr>
     
     

     
     

      
      				<td>出生日期:</td>
     
     

     
     

      
      				<td><input type="text" name="birthday" value=""></td>
     
     

     
     

      
      			</tr>
     
     

     
     

      
      		</table>
     
     

     
     

      
      		 </form>
     
     

     
     

      
      		 </center>
     
     

     
     

      
      		 <script type="text/javascript">
     
     

     
     

      
      		 	window.onload=function(){
     
     

     
     

      
      		 		document.getElementById("checkusername").onclick=function(){
     
     

     
     

      
      		 			var xhr = createXmlHttpRequest();
     
     

     
     

      
      		 			xhr.onreadystatechange=function(){
     
     

     
     

      
      		 				if(xhr.readyState==4){
     
     

     
     

      
      		 					if(xhr.status==200||xhr.status==304){
     
     

     
     

      
      		 						var data = xhr.responseText;
     
     

     
     

      
      		 						document.getElementById("divcheck").innerHTML=data;
     
     

     
     

      
      		 					}
     
     

     
     

      
      		 				}
     
     

     
     

      
      		 			}
     
     

     
     

      
      		 			xhr.open("POST","${pageContext.request.contextPath}/servlet/ServletDemo3?time="+new Date().getTime());
     
     

     
     

      
      		 			
     
     

     
     

      
      		 			xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
     
     

     
     

      
      		 			
     
     

     
     

      
      		 			var username = document.getElementById("username").value;
     
     

     
     

      
      		 			
     
     

     
     

      
      		 			xhr.send("username="+username);
     
     

     
     

      
      		 		}
     
     

     
     

      
      		 	}
     
     

     
     

      
      		 	function createXmlHttpRequest(){
     
     

     
     

      
      				   var xmlHttp;
     
     

     
     

      
      				   try{    //Firefox, Opera 8.0+, Safari
     
     

     
     

      
      						   xmlHttp=new XMLHttpRequest();
     
     

     
     

      
      					}catch (e){
     
     

     
     

      
      						   try{    //Internet Explorer
     
     

     
     

      
      								  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
     
     

     
     

      
      							}catch (e){
     
     

     
     

      
      								  try{
     
     

     
     

      
      										  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
     
     

     
     

      
      								  }catch (e){}  
     
     

     
     

      
      						   }
     
     

     
     

      
      					}
     
     

     
     

      
      				   return xmlHttp;
     
     

     
     

      
      				 }
     
     

     
     

      
      		 </script>
     
     

     
     

      
      	</body>
     
     

     
     

      
      	
     
     

     
     

      
      </html>


//servlet部分： 
    
    

     
     

      
      package cn.itcast.controller;
     
     

     
     

      
       
     
     

     
     

      
      import java.io.IOException;
     
     

     
     

      
      import java.io.PrintWriter;
     
     

     
     

      
       
     
     

     
     

      
      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 ServletDemo3
     
     

     
     

      
       */
     
     

     
     

      
      @WebServlet("/servlet/ServletDemo3")
     
     

     
     

      
      public class ServletDemo3 extends HttpServlet {
     
     

     
     

      
      	private static final long serialVersionUID = 1L;
     
     

     
     

      
        
     
     

     
     

      
      	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
     
     

     
     

      
      		response.setContentType("text/html;charset=UTF-8");
     
     

     
     

      
      		PrintWriter out = response.getWriter();
     
     

     
     

      
      		String username = request.getParameter("username");
     
     

     
     

      
      		System.out.println(username);
     
     

     
     

      
      		if(username.equals("sa")){
     
     

     
     

      
      			out.write("用户名已经存在");
     
     

     
     

      
      		}else{
     
     

     
     

      
      			out.write("用户名可以使用");
     
     

     
     

      
      		}
     
     

     
     

      
      	}
     
     

     
     

      
       
     
     

     
     

      
      	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
     
     

     
     

      
      		doGet(request,response);
     
     

     
     

      
      	}
     
     

     
     

      
       
     
     

     
     

      
      }

chitry_
关注
专栏目录
ajax异步验证用户名是否存在
08-07
ajax异步验证用户名是否存在，非常小巧的实例，需要安装oracle数据，建立一个用户表，实例中有用户表的实体，可以仿照写一个数据库。
layui的表单验证支持ajax判断用户名是否重复的实例
10-16
在现代网页开发中，表单验证是不可或缺的一个环节，尤其当涉及到用户注册、登录等场景时，对用户名的唯一性验证是保证系统稳定运行的重要措施。本文将通过实例展示如何利用layui前端框架结合ajax技术实现表单验证中...
ajax验证用户名
lixiamani1的博客
01-18 69
[code="java"]var xmlHttp; function createXMLHttpRequest() { //表示当前浏览器不是ie,如ns,firefox if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { ...
简单的Ajax验证用户名
冬青的专栏
12-25 1154
ajax
Ajax进行用户名验证
童一的博客
03-31 309
学习目标： Ajax进行用户名验证 学习内容： Ajax进行用户名验证 学习时间： 学习产出： 接上篇 5、使用Ajax进行用户名验证 (1)、springmvc配置:springmvc-servlet.xml加入json乱码配置 <!--注解驱动--> <mvc:annotation-driven> <!--JSON乱码问题配置--> <mvc:message-converters register-def
ajax 验证用户名是否存在
PHP在线学习笔记
02-18 2160
index.php  //用于界面显示     username:       for.php //用于接收参数并处理   if($_GET[id]=='user')   {    echo '重名';   }   else   {    echo "dddddd";   } ?> ajax.js     //ajax技术处理 var xmlH
ajax验证用户名和密码的实例代码
10-22
本文所介绍的实例代码主要通过前端JavaScript和后端PHP脚本相结合的方式，展示了如何使用AJAX技术异步地验证用户的用户名和密码。该实例同时涉及了客户端的HTML表单和服务器端的PHP脚本处理，还包括了客户端和服务器...
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
12-08
总结起来，这个实例展示了如何利用jQuery的Ajax功能，结合简单的服务器端代码，实现用户名存在的实时验证，提升了用户体验。通过这个例子，我们可以学习到Ajax的使用方法，包括设置请求类型、URL、数据、数据类型，...
Ajax验证用户名或昵称是否已被注册
08-30
这个过程可以通过Ajax技术实现，使得用户在输入用户名或昵称后无需刷新页面就能立即得到验证反馈。Ajax，即Asynchronous JavaScript and XML（异步JavaScript和XML），是一种在不重新加载整个网页的情况下，能够更新...
纯AJAX实现用户名验证
03-16
【标题】"纯AJAX实现用户名验证"涉及的是在Web开发中使用JavaScript和Ajax技术进行实时用户输入验证的方法。Ajax（Asynchronous JavaScript and XML）允许网页在不重新加载整个页面的情况下与服务器交换数据并更新...
ajax验证用户名是否重复
05-18
ajax+jQuery+struts2验证用户名是否重复
利用Ajax实现无刷新验证用户名和密码是否正确
09-15
利用Ajax实现无刷新验证用户名和密码是否正确，其中是通小图片来显示结果的。
ajax验证用户名是否存在
窥望奇妙世界
02-15 8515
需求： 利用ajax实现 当输入用户名时，验证该用户名是否已经存在，如果存在，给出重新输入用户名，不存在，提示可以使用。简单起见，如果用户名不等于 'shizhan'，则可以使用。      html页面：       [html] view plaincopy %@ page language="java" pageEncoding="utf-8"%>      > 
使用Ajax验证用户名是否已存在
x297910962的博客
03-24 3427
jsp页面中的ajax实现代码：function checkUserName(){ //获取用户名文本框中的值 var username = document.getElementById("username").value; if(username != null&amp;&amp;username != ""){ //1.创建异步交互对象 var xhr = crea...
Ajax——校验用户名是否可用
Woo_home的博客
04-06 784
1. 搭建环境 页面准备 <body> <table border="1" width="500"> <tr> <td>用户名:</td> <td><input type="text" name="name" id="name" onblur="checkUserName(...
AJAX-校验用户名是否可用
maco_liao的专栏
07-24 305
1.给用户名文本框绑定失去焦点事件 &lt;input type="text" name="username" onblur="validateUsername()" id="username"/&gt; 2.创建XMLHttpRequest对象 if (window.XMLHttpRequest) {     xhr=new XMLHttpRequest(); }else if (wind...
第一个Ajax，判断用户名是否可用
天将降大任于斯人也
06-08 1828
Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。 Ajax对服务器没什么要求，可以为Java EE应用程序，.NET应用程序和其他类型的应用程序服务。可以通过Ajax，可以编
Ajax验证用户名是否注册案例
WhereYouGo的专栏
03-09 740
myeclipse下建web project，主要有2个文件，一个是index.jsp,一个是后台验证用户名是否注册的servlet Check.java index.jsp代码如下： <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServer
Ajax校验用户名是否可用
Rick的博客
04-06 262
准备 导包：DBUtil，JDBC，C3P0 在src下导入c3p0-config.xml 导入JDBCUtil 创建数据库 第2.3.条查看https://blog.csdn.net/weixin_44718300/article/details/88994973 1、新建JSP页面 <body> <table border="1" width=...
利用jQuery和Ajax验证用户名唯一性
"验证用户名是否唯一(JQuery-Ajax)"描述了通过使用jQuery的Ajax功能来异步向服务器发送请求，获取用户名的唯一性状态。这通常发生在前端表单提交时，为了防止用户注册或登录时输入重复的用户名。 3. **关键部分...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值