`
miaoge
  • 浏览: 109312 次
  • 性别: Icon_minigender_1
  • 来自: 嘉兴
社区版块
存档分类

Ajax异步处理当用户申请新用户时,输完用户名鼠标点击其他地方后就弹出提示该用户名是否注册的方法

阅读更多

Ajax异步处理当用户申请新用户时,输完用户名鼠标点击其他地方后就弹出提示该用户名是否注册的方法:

 

Ajax处理的JS代码:

<script language="javascript">

var xmlHttpReq;
function createXmlHttpRequest() {
 if (window.XMLHttpRequest) {
  xmlHttpReq = new XMLHttpRequest();
 } else {
  xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
 }
}
function checkUser() {
 createXmlHttpRequest();
 xmlHttpReq.onreadystatechange = handle;
 var username = document.getElementById("username").value;
 var test_username = document.getElementById("test_username");
 test_username.style.display = "none";
 if (username == "") {
  test_username.style.display = "block";
  alert("username Can not be empty");
 } else {

  //url是一个跳转地址,把用户名传过去跳到Action层去调用checkUser方法进行验证
  var url = "system/login-checkUser?username=" + username + "&time=" + new Date().getTime();
  xmlHttpReq.open("get", url, true);
  xmlHttpReq.onreadystatechange = handle;
  xmlHttpReq.send(null);
 }
}
function handle() {
 if (xmlHttpReq.readyState == 4) {
  if (xmlHttpReq.status == 200) {
   var res = xmlHttpReq.responseText;
   var result = document.getElementById("test_username");
   result.style.display = "";
   result.innerHTML = res;   //设置提示信息
  }
 }
}

</script>

 

JSP页面调用:

<tr>
      <td width="104"><div align="right">用户名:${userexist}</div></td>
      <td width="201" height="24"><input name="userdto.username" type="text"        class="inputcontent" id="username" value="" onblur="checkUser()" size="20" >       
      <span class="star">*</span></td>
    <td width="473"><div id="test_username" style="display:none"><font color="#FF0000">用户名不能为空</font></div></td>
    </tr>

 

Action层验证用户是否存在方法:

 

/**验证用户名是否存在**/
 public void checkUser(){
  try {
   HttpServletRequest request = ServletActionContext.getRequest();
   HttpServletResponse response = ServletActionContext.getResponse();
   PrintWriter pw = response.getWriter();
   String username = request.getParameter("username");
   if(userManageBiz.checkUser(username)){
    pw.println("<font color='red'> 该用户名已经存在,请重新输入!</font><input type='hidden'  name='userexist' value='userexist'/>");
   }else pw.println("<font color='blue'> 恭喜你,这个用户名可以用!</font>");
   
  } catch (IOException e) {
   e.printStackTrace();
  }
 }

 

  • 大小: 23.3 KB
分享到:
评论

相关推荐

    jquery框架 用户弹出框 ajax请求(仿新浪用户信息弹出框)

    这个功能通常用于显示用户的详细资料,如头像、昵称、简介等,当用户鼠标悬停或点击用户名时,弹出框会动态加载并显示这些信息。 首先,我们需要了解jQuery中的弹出框实现。常见的弹出框组件有Bootstrap的Modal或者...

    头像弹出层(鼠标放到CSDN上账户头像上)

    在本例中,我们关注的是CSDN(China Software Developer Network)网站上的一个功能,当鼠标悬停在用户的头像上时,会弹出一个包含用户信息的悬浮窗口。这个功能提高了用户体验,让用户无需离开当前页面就能快速获取...

    基于JavaScript 图书管理系统【100010107】

    本项目是用 HTML,CSS,js 语言编写的图书管理系统,用 ...(6)搜索图书,用户在搜索框输入书名/作者/出版社信息,点击搜索按钮,弹出该图书的详细信息,如果没有搜索到,就弹出提示。新增加的信息也可以被搜索到。

    文本框输入 @ 符号的输入提示的JS代码.rar

    这种功能常见于社交网络或电子邮件服务,当用户输入“@”以提及其他人或组织时,系统会弹出一个下拉菜单,显示可能的匹配项。 首先,实现这种功能需要理解JavaScript事件监听。在本例中,我们需要监听文本框的`...

    放新浪微博名片弹出层

    本项目名为“放新浪微博名片弹出层”,旨在实现一个与新浪微博类似的用户交互功能,即当鼠标指针悬停在用户名或用户头像上时,会弹出一个包含用户详细信息的浮动卡片,我们称之为“名片弹出层”。 首先,我们需要...

    js带遮罩弹出层登录注册表单特效代码

    弹出层通常用于显示登录、注册或找回密码等表单,当用户触发特定事件(如点击按钮)时,这些表单会从页面背景中弹出,以便用户进行操作。 【遮罩层】 遮罩层是网页设计中的一个重要元素,它创建了一个半透明的覆盖...

    超实用的jQuery代码段

    8.14 在AJAX异步调用时处理JSON数据 8.15 解析XML数据并加载到HTML表格 8.16 jQuery AJAX错误的处理方法 8.17 在页面级创建全局的AJAX监听器以及状态指示器 8.18 级联AJAX数据异步加载 8.19 取消AJAX异步请求 第9章...

    KODExplorer 芒果云-资源管理器

    - 弹出层中的弹出层关闭,父窗口失去焦点问题。 - 代码中grunt部分代码拆分开,放到程序外面;提交到git、osc - 桌面:删除alert enter快捷键删除 - install 检测 加入跳过,(只判断用到的函数) 加入多语言 - ...

    java开源包2

    与以往的授权方式不同之处是OAUTH的授权不会使第三方触及到用户的帐号信息(如用户名与密 码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此OAUTH是安全的。同时,任何第三方都可以...

    java开源包4

    与以往的授权方式不同之处是OAUTH的授权不会使第三方触及到用户的帐号信息(如用户名与密 码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此OAUTH是安全的。同时,任何第三方都可以...

    Flex开发实例.pdf

    - 当用户在地图上点击时,可以显示点击的具体位置信息,如经纬度等。 ### 实例开发 #### 1. **用户注册界面** - 创建一个用户注册界面,包括用户名、密码等输入字段,以及验证逻辑。 #### 2. **小型Flex网站** ...

    java开源包1

    与以往的授权方式不同之处是OAUTH的授权不会使第三方触及到用户的帐号信息(如用户名与密 码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此OAUTH是安全的。同时,任何第三方都可以...

    Java资源包01

    与以往的授权方式不同之处是OAUTH的授权不会使第三方触及到用户的帐号信息(如用户名与密 码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此OAUTH是安全的。同时,任何第三方都可以...

    java开源包11

    与以往的授权方式不同之处是OAUTH的授权不会使第三方触及到用户的帐号信息(如用户名与密 码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此OAUTH是安全的。同时,任何第三方都可以...

    java开源包3

    与以往的授权方式不同之处是OAUTH的授权不会使第三方触及到用户的帐号信息(如用户名与密 码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此OAUTH是安全的。同时,任何第三方都可以...

    java开源包6

    与以往的授权方式不同之处是OAUTH的授权不会使第三方触及到用户的帐号信息(如用户名与密 码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此OAUTH是安全的。同时,任何第三方都可以...

    java开源包5

    与以往的授权方式不同之处是OAUTH的授权不会使第三方触及到用户的帐号信息(如用户名与密 码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此OAUTH是安全的。同时,任何第三方都可以...

    java开源包10

    与以往的授权方式不同之处是OAUTH的授权不会使第三方触及到用户的帐号信息(如用户名与密 码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此OAUTH是安全的。同时,任何第三方都可以...

    java开源包8

    与以往的授权方式不同之处是OAUTH的授权不会使第三方触及到用户的帐号信息(如用户名与密 码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此OAUTH是安全的。同时,任何第三方都可以...

    java开源包7

    与以往的授权方式不同之处是OAUTH的授权不会使第三方触及到用户的帐号信息(如用户名与密 码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此OAUTH是安全的。同时,任何第三方都可以...

Global site tag (gtag.js) - Google Analytics