用Ajax实现的验证用户名是否重复实例

最新推荐文章于 2021-08-06 15:39:40 发布
最新推荐文章于 2021-08-06 15:39:40 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： 我自己看的 文章标签： ajax xmlhttprequest class path function iterator
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dyllove98/article/details/4405243
版权
  1. <%@ page contentType="text/html; charset=UTF-8" %>   
  2. <%@ taglib prefix="s" uri="/struts-tags" %>   
  3. <html>   
  4. <head>   
  5. <title>用户添加页面</title>   
  6. <script type="text/javascript" src="${path}/common/plugins/datepicker/WdatePicker.js"></script>   
  7. <script type="text/javascript" src="${path}/dwr/interface/place.js"></script>   
  8. <script type="text/javascript" src="${path}/dwr/engine.js"></script>   
  9. <script type="text/javascript" src="${path}/dwr/util.js"></script>   
  10. <script>   
  11.   
  12.   function getCity(){   
  13.    var obj_pro=document.getElementById("province");   
  14.    var obj_City = document.getElementById("city");   
  15.    var pro_index=obj_pro.selectedIndex;   
  16.    var pro_value=obj_pro.options[pro_index].value;   
  17.        
  18.      
  19.   if(pro_value!=""&&pro_value!=null){   
  20.         
  21.      place.getCityList(pro_value,cityReturn);   
  22.       
  23.    }else{   
  24.         
  25.      DWRUtil.removeAllOptions(obj_City);   
  26.      DWRUtil.addOptions(obj_City,{'':'请选择城市...'});   
  27.    }   
  28.       
  29.   }   
  30.     
  31.     
  32.  function cityReturn(data){   
  33.       
  34.      var obj_City = document.getElementById("city");   
  35.      DWRUtil.removeAllOptions(obj_City);   
  36.      DWRUtil.addOptions(obj_City,{'':'请选择城市...'});   
  37.      DWRUtil.addOptions(obj_City,data);   
  38.  }    
  39.     
  40.  function currentDate(){   
  41.     var myDate=new Date();   
  42.     var year=myDate.getFullYear();   
  43.     var month=myDate.getMonth()+1;   
  44.     var day=myDate.getDate();   
  45.     var now=year+"-"+month+"-"+day;   
  46.     document.forms[0]['user.startDate'].value=now;   
  47.  }   
  48.     
  49.   // 创建XMLHTTPRequest对象   
  50.  function getXMLHTTPRequest(){   
  51.      var xmlHttp;   
  52.      if(window.XMLHttpRequest){   
  53.          xmlHttp=new XMLHttpRequest();  //非IE浏览器，用xmlhttprequest对象创建   
  54.       }else if(window.ActiveXObject){   
  55.          xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");  //IE浏览器用activexobject对象创建   
  56.       }   
  57.         
  58.     return xmlHttp;   
  59.     
  60.  }   
  61.     
  62.  var http;   
  63.  function checkUser(){   
  64.     var username=document.forms[0]['user.username'].value;   
  65.     http=getXMLHTTPRequest();   
  66.     var url="${path}/user/checkUser.action?user.username="+username;   
  67.     if(http){  //成功创建XMLHTTPRequest对象   
  68.       http.open("GET",url,true); 　　//与服务端建立连接(请求方式post或get，地址,true表示异步)   
  69.       http.onreadystatechange=callback;  //指定回调函数　　    
  70.       http.send(null);  //发送请求   
  71.     }   
  72.        
  73.        
  74.  }   
  75.     
  76.  function callback(){   
  77.    if(http.readyState==4){   
  78.      if(http.status==200){   
  79.         processResponse();   
  80.      }   
  81.       
  82.    }   
  83.      
  84.  }   
  85.  //处理服务器端响应   
  86.  function processResponse(){   
  87.     var text=http.responseText;   
  88.     if(text=="true"){   
  89.         document.getElementById("error").innerHTML="用户名已经存在";   
  90.      }else{   
  91.         document.getElementById("error").innerHTML="";   
  92.      }   
  93.  }   
  94.     
  95.     
  96.     
  97. </script>   
  98. </head>   
  99. <body>   
  100.   
  101. <form name="form" method="post" action="${path }/user/userSave.action">   
  102.     
  103. <table  align="center" class="table-form" >   
  104.   <tr>   
  105.      <td colspan="4" class="table-title">添加用户信息</td>   
  106.   </tr>   
  107.   <tr>   
  108.      <td class=table-lable_title>用户名</td>   
  109.      <td><input type="text" name="user.username" onBlur="checkUser()"><span id="error" style="color:red"></span></td>   
  110.      <td class=table-lable_title>密&nbsp;&nbsp;码</td>   
  111.      <td><input type="password" name="user.password" id="password" size="21"></td>   
  112.   </tr>   
  113.   <tr>   
  114.      <td class=table-lable_title>性&nbsp;&nbsp;别</td>   
  115.      <td><select name="user.sex" style="width:50px">   
  116.           <option value="1">&nbsp;男&nbsp;</option>   
  117.           <option value="0">&nbsp;女&nbsp;</option>   
  118.          </select>   
  119.      </td>   
  120.      <td class=table-lable_title>省&nbsp;&nbsp;份</td>   
  121.      <td><select name="user.provinceId" id="province" onChange="getCity();">   
  122.          <option value="">请选择省份</option>   
  123.          <s:iterator value="provinceList">   
  124.          <option value="<s:property value="id"/>"><s:property value="provinceName"/></option>   
  125.          </s:iterator>   
  126.          </select>   
  127.      </td>   
  128.   </tr>    
  129.   <tr>   
  130.      <td class=table-lable_title>城&nbsp;&nbsp;市</td>   
  131.      <td><select name="user.cityId" id="city">   
  132.        <option value="">请选择城市...</option>   
  133.        </select>   
  134.      </td>   
  135.      <td class=table-lable_title>电&nbsp;&nbsp;话</td>   
  136.      <td><input type="text" name="user.telphone" id="telphone" size="20"></td>   
  137.    </tr>   
  138.    <tr>   
  139.      <td class=table-lable_title>E-Mail</td>   
  140.      <td><input type="text" name="user.email" id="email" size="20"></td>   
  141.      <td class=table-lable_title>添加日期</td>   
  142.      <td>   
  143.       <input type="text" name="user.startDate" class="Wdate" value="" οnmοuseοver="currentDate();" οnclick="new WdatePicker(this)" readonly>   
  144.      </td>   
  145.    </tr>   
  146.    <tr>   
  147.       <td colspan="4" class="table-button">   
  148.          <input type="submit" value="提交" >   
  149.          <input type="reset"  value="重置" >   
  150.       </td>   
  151.      </tr>   
  152. </table>   
  153.       
  154. </form>         
  155. </body>   
  156. </html>  
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<title>用户添加页面</title>
<script type="text/javascript" src="${path}/common/plugins/datepicker/WdatePicker.js"></script>
<script type="text/javascript" src="${path}/dwr/interface/place.js"></script>
<script type="text/javascript" src="${path}/dwr/engine.js"></script>
<script type="text/javascript" src="${path}/dwr/util.js"></script>
<script>

  function getCity(){
   var obj_pro=document.getElementById("province");
   var obj_City = document.getElementById("city");
   var pro_index=obj_pro.selectedIndex;
   var pro_value=obj_pro.options[pro_index].value;
    
  
  if(pro_value!=""&&pro_value!=null){
     
     place.getCityList(pro_value,cityReturn);
   
   }else{
     
     DWRUtil.removeAllOptions(obj_City);
     DWRUtil.addOptions(obj_City,{'':'请选择城市...'});
   }
   
  }
 
 
 function cityReturn(data){
   
     var obj_City = document.getElementById("city");
     DWRUtil.removeAllOptions(obj_City);
     DWRUtil.addOptions(obj_City,{'':'请选择城市...'});
	 DWRUtil.addOptions(obj_City,data);
 } 
 
 function currentDate(){
    var myDate=new Date();
    var year=myDate.getFullYear();
    var month=myDate.getMonth()+1;
    var day=myDate.getDate();
    var now=year+"-"+month+"-"+day;
    document.forms[0]['user.startDate'].value=now;
 }
 
  // 创建XMLHTTPRequest对象
 function getXMLHTTPRequest(){
     var xmlHttp;
     if(window.XMLHttpRequest){
         xmlHttp=new XMLHttpRequest();  //非IE浏览器，用xmlhttprequest对象创建
      }else if(window.ActiveXObject){
         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");  //IE浏览器用activexobject对象创建
      }
     
    return xmlHttp;
 
 }
 
 var http;
 function checkUser(){
    var username=document.forms[0]['user.username'].value;
    http=getXMLHTTPRequest();
    var url="${path}/user/checkUser.action?user.username="+username;
    if(http){  //成功创建XMLHTTPRequest对象
      http.open("GET",url,true); 　　//与服务端建立连接(请求方式post或get，地址,true表示异步)
      http.onreadystatechange=callback;  //指定回调函数　　 
      http.send(null);  //发送请求
    }
    
    
 }
 
 function callback(){
   if(http.readyState==4){
     if(http.status==200){
        processResponse();
     }
   
   }
  
 }
 //处理服务器端响应
 function processResponse(){
    var text=http.responseText;
    if(text=="true"){
        document.getElementById("error").innerHTML="用户名已经存在";
     }else{
        document.getElementById("error").innerHTML="";
     }
 }
 
 
 
</script>
</head>
<body>

<form name="form" method="post" action="${path }/user/userSave.action">
 
<table  align="center" class="table-form" >
  <tr>
     <td colspan="4" class="table-title">添加用户信息</td>
  </tr>
  <tr>
     <td class=table-lable_title>用户名</td>
     <td><input type="text" name="user.username" onBlur="checkUser()"><span id="error" style="color:red"></span></td>
     <td class=table-lable_title>密&nbsp;&nbsp;码</td>
     <td><input type="password" name="user.password" id="password" size="21"></td>
  </tr>
  <tr>
     <td class=table-lable_title>性&nbsp;&nbsp;别</td>
     <td><select name="user.sex" style="width:50px">
          <option value="1">&nbsp;男&nbsp;</option>
          <option value="0">&nbsp;女&nbsp;</option>
         </select>
     </td>
     <td class=table-lable_title>省&nbsp;&nbsp;份</td>
     <td><select name="user.provinceId" id="province" onChange="getCity();">
         <option value="">请选择省份</option>
         <s:iterator value="provinceList">
         <option value="<s:property value="id"/>"><s:property value="provinceName"/></option>
         </s:iterator>
         </select>
     </td>
  </tr> 
  <tr>
     <td class=table-lable_title>城&nbsp;&nbsp;市</td>
     <td><select name="user.cityId" id="city">
       <option value="">请选择城市...</option>
       </select>
     </td>
     <td class=table-lable_title>电&nbsp;&nbsp;话</td>
     <td><input type="text" name="user.telphone" id="telphone" size="20"></td>
   </tr>
   <tr>
     <td class=table-lable_title>E-Mail</td>
     <td><input type="text" name="user.email" id="email" size="20"></td>
     <td class=table-lable_title>添加日期</td>
     <td>
      <input type="text" name="user.startDate" class="Wdate" value="" οnmοuseοver="currentDate();" οnclick="new WdatePicker(this)" readonly>
     </td>
   </tr>
   <tr>
      <td colspan="4" class="table-button">
	     <input type="submit" value="提交" >
		 <input type="reset"  value="重置" >
	  </td>
     </tr>
</table>
   
</form>      
</body>
</html>



2. UserAction.java

Java代码 复制代码
  1. public class UserAction{   
  2.    private UserService userService;   
  3.       
  4.    public void setUserService(UserService userService){   
  5.        this.userService=userService;   
  6.    }   
  7.   
  8.   
  9.   public void checkUser(){   
  10.            
  11.       HttpServletResponse response=ServletActionContext.getResponse();   
  12.       boolean flag=userService.isExistUser(user.getUsername());   
  13.       try{   
  14.              PrintWriter pw=response.getWriter();   
  15.              pw.print(flag);   
  16.              pw.close();   
  17.         }catch(IOException e){   
  18.                  
  19.         }   
  20.           
  21.            
  22.              
  23.            
  24.     }   
  25.   
  26.   
  27. }  
Jlins
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用ajax验证用户名重复
weixin_30628801的博客
05-14 300
　　继上次的用户注册登录案例之后，对其中的部分功能再做进一步改进。上一版中用户提交表单后才对用户名进行校验，虽然做了回显，但还是感觉功能弱了些。为了能有更好用户体验，不是在用户提交表单后才给提示，而是在用户输入用户名后就立即对该用户名进行数据库校验，经过晚上的测试现在可以使用纯js版和jquery版。　　准备工作，先编写好验证用户名重复的后台Servlet程序，然后在jsp或html中使用js对用...
使用ajax检查注册时用户名是否重复
余木尘的博客
09-24 2765
1、首先在注册页面添加两个span标签，用于放用户名不重复时的 “用户名可用” 提示，和用户名重复时的 “用户名不可用” 提示，默认先隐藏（style=“display: none”） <span id="span1" class="label label-success" style="display: none">用户名可用</span> <span id="sp...
Ajax实现判断用户名是否重复
qq_37024565的博客
06-17 1万+
                                                       Ajax实现判断用户名是否重复        今天刚看完Ajax的一些简单的介绍，本着好好学习，day day up的信念，于是乎自己就写了这么一个简单的判断用户名是否存在的的小demo。好了，废话就不多说了，直接上代码吧，Let's go!    首先，我们需要写了我们的Jsp页面&lt...
用ajax实现检测注册用户名是否重复的完整例子
java_bai的博客
03-12 683
ValidateName.java代码如下所示，并且采用userIsExist查找数据库看是否存在相同的用户名。 [code="java"]package com.wuliu.test; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; impor...
Ajax 实现检查用户名重复 （匿名函数实现）
eagle0728的专栏
07-27 141
function validate(field){ if(trim(field.value).length != 0){ var xmlHttp; // 创建Ajax核心对象XMLHttpRequest //表示当前浏览器不是ie，如ns.firefox if(window.XMLHTttpRequest){ xmlHttp = ne...
layui的表单验证支持ajax判断用户名是否重复的实例
10-16
今天小编就为大家分享一篇layui的表单验证支持ajax判断用户名是否重复的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
基于jQuery实现Ajax验证用户名是否可用实例
10-18
本篇将详细介绍如何使用jQuery库来实现一个简单的Ajax验证用户名是否可用的实例。 首先，我们需要在HTML页面中设置输入框和显示验证结果的元素： ```html <span id="username_span"></span> ``` 这里的`<input>`...
使用ajax实现异步验证用户名是否重复
06-28
以下将详细讲解如何使用AJAX实现异步验证用户名是否重复。 一、理解AJAX AJAX 是一种在不重新加载整个网页的情况下，能够更新部分网页的技术。它通过创建XMLHttpRequest对象（通常称为XHR），向服务器发送请求并...
基于jQuery实现Ajax验证用户名是否存在实例
10-22
主要为大家详细介绍了基于jQuery实现Ajax验证用户名是否存在实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用户注册时利用ajax来查重,ajax
weixin_28862113的博客
08-06 435
一、多对多的三种创建方式1、三种方式1、全自动(较为常用)2、纯手动(了解)3、半自动(推荐使用)2、优缺点比较1、全自动：优点：第三张表自动帮你创建缺点：第三张表无法扩展额外的字段2、纯手动：优点：第三张表可以扩展额外的字段缺点：orm查询的时候会带来不便3、半自动：优点：第三张表可以扩展任意的额外字段 还可以利用orm 的正反向查询缺点：无法利用 add set remove clear方法，...
Ajax验证用户名是否重复.rar
07-26
通过页面提交的数据查询数据库是否存在提交过来的数据；如果存在即提示用户名存在。
ajax java用户名查重_Django之AJAX
weixin_35039926的博客
02-28 147
AJAX准备知识：JSON什么是 JSON ？JSON 指的是 JavaScript 对象表示法(JavaScriptObjectNotation)JSON 是轻量级的文本数据交换格式JSON 独立于语言*JSON 具有自我描述性，更易理解*JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言...
ajax验证用户重复,使用ajax验证用户名是否重复
weixin_28958733的博客
08-05 947
ajaxTest.jspJSP Page输入用户名：光标移除检查是否重复显示结果document.getElementsByTagName("input")[0].onblur=function(){//alert("aaa");//取得用户输入的用户名var username=this.value;//alert(username)username=encodeURI(username);var...
使用ajax验证用户名是否重复
不因俊俏难为友，正为风流始读书
05-30 1188
ajaxTest.jsp JSP Page 输入用户名：光标移除检查是否重复 显示结果 document.getElementsByTagName("input")[0].onblur=function() { //alert("aaa");
用ajax实现检测注册用户名是否重复的完整例子（一）
热门推荐
asdfzjs的专栏
08-05 1万+
网上搜索了很多案例，但都和自己的需求不一样。  最终实现了下面的例子实现了对注册用户名的校验。采用的架构是servelet+jsp.  JSP页面代码：  Html代码   form action="register.do?action=add" onsubmit="return submessage(this)" method="post" name="form1">
使用Ajax简单验证用户名是否重复
confusion_ct的专栏
03-05 1716
本例子主要是用于简单验证用户名是否为空，是否重复：         用户名:                                 密码：             编写相关JS代码: xx.js //声明 function ajaxFunction(){     var xmlHttp;     if(window.XMLHttpRequ
AJAX验证是否重复
宋学孟 廊坊师范学院信息技术提高班 九期
09-03 1661
AJAX验证用户代码重复 当焦点一离开就去检查 1.input对象的onblur事件 onblur="validate(this)" 2. 创建XMLHttprequest对象 function validate(field){ if(trim(field.value).length != 0){ var xmlhttp= null; if (w
关于AJAX实现验证用户名是否重复
Owen_Gao
06-27 828
index.php 以下代码：是传送方式是get，数据类型为文本responseText ajax function $(id){ return document.getElementById(id); } function checkName(){ var http_request=createAjax(); http_request.onreadystate
Ajax检测注册用户是否存在
weixin_34293141的博客
03-20 154
HTML代码如下: LoginValidate.aspx &lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="LoginValidate.aspx.cs" Inherits="LoginValidate" %&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" &
ajax php注册登录页面,用AJAX实现页面登陆以及注册用户名验证的简单实例
最新发布
05-31
// 用户名验证 $(document).on('blur', '#username', function(){ var username = $(this).val(); $.ajax({ type: 'POST', url: 'check_username.php', data: {username: username}, ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值