`

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

阅读更多
1. userReg.jsp
<%@ 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="" onmouseover="currentDate();" onclick="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
public class UserAction{
   private UserService userService;
   
   public void setUserService(UserService userService){
       this.userService=userService;
   }


  public void checkUser(){
    	
      HttpServletResponse response=ServletActionContext.getResponse();
      boolean flag=userService.isExistUser(user.getUsername());
      try{
        	 PrintWriter pw=response.getWriter();
        	 pw.print(flag);
        	 pw.close();
        }catch(IOException e){
        	  
        }
       
        
          
        
    }


}



分享到:
评论
2 楼 luchuan10000 2012-07-24  
求struts.xml配置,关于验证用户名的。跪_求啊.....
1 楼 weisongh 2012-04-01  
学习下

相关推荐

    Ajax注册验证用户名实例

    在这个"Ajax注册验证用户名实例"中,我们将深入探讨如何利用Ajax技术来实现用户在注册时实时验证用户名是否已存在,从而提供更优秀的用户体验。 首先,我们需要一个HTML页面作为用户界面,包含一个输入框让用户输入...

    使用ajax实现异步验证用户名是否重复

    以下将详细讲解如何使用AJAX实现异步验证用户名是否重复。 一、理解AJAX AJAX 是一种在不重新加载整个网页的情况下,能够更新部分网页的技术。它通过创建XMLHttpRequest对象(通常称为XHR),向服务器发送请求并...

    SSH整合AJAX验证用户名存在的完整实例

    SSH整合AJAX验证用户名存在的完整实例是一个典型的Web开发应用场景,主要涉及了Struts2(S)、Spring(S)和Hibernate(H)三大框架的集成,以及异步JavaScript和XML(AJAX)技术的运用,用于提升用户体验。...

    利用Ajax实现无刷新验证用户名和密码是否正确

    "利用Ajax实现无刷新验证用户名和密码是否正确"这一技术就是为了让用户在输入登录信息时能够得到即时反馈,无需等待页面整体刷新,极大地提升了交互体验。Ajax(Asynchronous JavaScript and XML)是一种创建动态...

    Ajax请求验证用户名问题

    在本场景中,标题"Ajax请求验证用户名问题"指的是使用Ajax来实现用户输入用户名时实时检查该用户名是否已被占用的功能。这通常在注册或登录界面非常常见,提供用户友好的体验,因为他们可以即时得知用户名是否可用,...

    Ajax异步验证注册用户名是否存在

    总结起来,这个实例展示了如何使用Ajax、PHP、MySQL和Apache协同工作,实现一个高效、安全的用户名异步验证功能。Ajax提供了无刷新的交互体验,PHP处理服务器端逻辑,MySQL管理数据存储,而Apache则作为可靠的服务器...

    AJax验证用户名是否存在

    总结来说,"AJax验证用户名是否存在"是Web开发中常见的功能,通过DWR或原生JavaScript,我们可以实现与后台的无刷新交互,检查用户名的可用性,提高用户注册或登录的效率。同时,需要注意安全性与性能的优化,确保...

    纯AJAX实现用户名验证

    【描述】虽然描述为空,但可以推断这篇博文可能详细讲解了如何通过AJAX技术实现在用户输入用户名时,后台验证用户名是否已存在或符合特定规则,避免用户提交表单后才发现问题,提高用户体验。 【标签】"源码 工具...

    ajax验证用户名是否存在

    在现代Web应用中,用户体验的重要性...总的来说,"Ajax验证用户名是否存在"是一个典型的前后端交互示例,展示了如何使用Ajax提升用户体验。它结合了前端的动态交互和后端的数据验证,是Web开发中不可或缺的一部分。

    layui的表单验证支持ajax判断用户名是否重复的实例

    本文将通过实例展示如何利用layui前端框架结合ajax技术实现表单验证中用户名的唯一性检查。 ### 了解layui表单验证 layui是一款前端UI框架,提供了一套简单的表单验证机制。通过给输入框添加特定的lay-verify属性...

    ajax检测用户名是否重复

    在本教程中,我们将探讨如何利用AJAX(Asynchronous JavaScript and XML)技术来检测用户名是否重复,以提升用户体验,避免用户在提交表单后才收到用户名已存在的错误提示。 首先,让我们理解什么是AJAX。AJAX是一...

    AJAX验证用户名的实例

    总之,"AJAX验证用户名的实例"是一个实用的入门项目,它涵盖了AJAX的基础知识,包括请求的发送、数据的接收和UI的更新。对于想要学习AJAX的初学者,这是一个很好的起点,可以帮助他们逐步掌握这种强大的Web开发技术...

    用AJAX实现页面登陆以及注册用户名验证的简单实例

    AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互...通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某

    SSH整合AJAX验证用户名存在和验证码的完整实例

    SSH整合AJAX验证用户名存在和验证码的完整实例SSH整合AJAX验证用户名存在和验证码的完整实例SSH整合AJAX验证用户名存在和验证码的完整实例SSH整合AJAX验证用户名存在和验证码的完整实例SSH整合AJAX验证用户名存在和...

    基于jQuery实现Ajax验证用户名是否可用实例

    本篇将详细介绍如何使用jQuery库来实现一个简单的Ajax验证用户名是否可用的实例。 首先,我们需要在HTML页面中设置输入框和显示验证结果的元素: ```html &lt;span id="username_span"&gt;&lt;/span&gt; ``` 这里的`&lt;input&gt;`...

    ajax和struts结合实现无刷新验证用户名是否存在

    ### AJAX与Struts结合实现无刷新验证用户名是否存在 在Web开发中,用户体验是至关重要的因素之一。传统的表单提交方式往往会导致整个页面重新加载,这不仅降低了用户体验,还增加了服务器的负担。为了解决这一问题...

    AJAX无刷新验证用户名是否存在

    "AJAX无刷新验证用户名是否存在"是一个典型的应用场景,它允许用户在输入用户名时实时检查该用户名是否已被占用,而无需提交整个表单或刷新整个页面。这一功能对于注册、登录等涉及用户账号的页面尤为重要,可以防止...

    Ajax实现简单的用户名验证

    在这个“Ajax实现简单的用户名验证”的示例中,我们将探讨如何利用Ajax来检查用户在注册时输入的用户名是否已存在,从而提供即时的反馈,提升用户体验。 首先,我们需要理解Ajax的基本组成部分: 1. **...

    jquery验证用户名是否存在实例

    这个实例用运用了ajax技术与jquery技术,实例实现了网站用户名的检测。这与传统的同步方式检测用户名是否存在,全然不同,本例实现了ajax的异步请求,用户无须等待,页面在返回结果时无刷新,大大改善了用户的体验!...

Global site tag (gtag.js) - Google Analytics