<%@ page pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html><head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />

<title>使用jQuery验证用户名是否存在，达到局部刷新的效果</title>

<script src="${basePath}/js/jquery.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){

    //聚焦时触发的事件

    $("#loginname").focus(function(){

        $("#msg").html("");

    });

    //点击按钮时触发事件

    $("#checkLoginname").click(function(){

        var loginname=$("#loginname").val().replace(/\s/g,'');//去除头尾空格

        if(loginname==''){

            $("#msg").html("用户名不能为空!");

            $("#loginname").val("");

            return false;

        }

        if(loginname.length>20){

            $("#msg").html("用户名超过长度!");

            return false;

        }

                //使用jQuery提交，回调函数function(data)里返回相应信息:data

        $.post("${basePath}/checkloginname.htm?d="+new Date().getTime(), {"member.loginname":loginname}, function(data){

            $("#msg").html(data);

        });

        return false;

    });

});

</script>

  </head>

  <body>

    <form method="post" action="${basePath}/registe.htm" id="registeForm" class="validateForm">

          <tr>

            <td width="30%" align="right">用户名：</td>

            <td width="70%">&nbsp;<input type="text" name="member.loginname" id="loginname" class="input" />&nbsp;

                <input type="button" value="检查用户名是否可用" class="btn" id="checkLoginname"/>&nbsp;<span id="msg" style="color:red"></span></td>

          </tr>

    </form>

  </body>

</html>

后台action代码：

MemberAction.java

/**

 *  ClassName: MemberAction.java*/

package com.tjitcast.bbs.web.action.front;

import org.apache.struts2.convention.annotation.Action;

import org.apache.struts2.convention.annotation.Namespace;

import org.apache.struts2.convention.annotation.ParentPackage;

import org.springframework.context.annotation.Scope;

import org.springframework.stereotype.Controller;

import com.tjitcast.bbs.domain.Member;

/**

 * 检查会员是否存在的Action类

 *

 * @author yjd

 */

@Controller("front.memberAction")

@Scope("prototype")

@Namespace("/")

@ParentPackage("struts-default")

public class MemberAction extends BaseAction {

    private static final long serialVersionUID = -4631080996625964833L;

    private Member member;

    /**

     * 检查用户名是否已经存在

     */

    @Action(value = "checkloginname")

    public void checkLoginname() {

        Member temp = memberService.get(member.getLoginname());

        if (temp != null) {

            renderText("用户名已存在，请更换！");

        } else {

            renderText("恭喜你，这个用户名可用!");

        }

    }

      public void renderText(String text) {

        HttpServletResponse response = getResponse();

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

        try {

            response.getWriter().write(text);

            response.getWriter().flush();

        } catch (IOException e) {

            throw new IllegalArgumentException(e); // 把受检异常转换为非受检异常

        }

    }

    public Member getMember() {

        return member;

    }

    public void setMember(Member member) {

        this.member = member;

    }

}

效果如下图：

使用jQuery验证用户名是否存在，达到局部刷新的效果的更多相关文章

  1. jquery使用load开展局部刷新没有效果

    jquery使用load开展局部刷新没有效果   jquery使用load进行局部刷新没有效果我的代码 <html><head><meta charset="u ...

  2. ssh整合问题总结--使用struts2+Ajax+jquery验证用户名是否已被注册

    在用户模块中的用户注册需求上,通常要进行用户名是否已被注册的验证,今天正好写了这个需求,把详细代码和所遇到的问题贴过来.在使用struts2+ajax时候,通常我们会返回json类型的数据,但是像上面 ...

  3. jQuery ajax表单提交实现局部刷新

    jQuery Ajax 异步提交 Form 表单,如果使用 get 请求,注意中文乱码问题,jquery 会先使用 iso8859-1 解码,然后发给服务器,如果使用 post 请求,则直接将中文内容 ...

  4. spring mvc + ajax上传文件，页面局部刷新

    1.点击上传按钮进行如下操作,通过表单名称以及input名称获取相应的值,对于上传的文件,使用.files来获取, 因为包含文件的上传,所以采用FormData的形式来进行数据交互,通过append将 ...

  5. Jquery验证插件 JqueryValidation 动态验证用户名等

    可以参考:http://www.w3cschool.cc/jquery/jquery-plugin-validate.html //form1 验证用户名 $("#form1"). ...

  6. 利用jQuery实现的Ajax 验证用户名是否存在

    异步刷新实现方式有多种,也可以借助JS的多种框架,下面是使用jQuery框架实现的AJAX 验证用户名是否存在 jQuery.ajax概述 HTTP 请求加载远程数据. 通过jQuery 底层 AJA ...

  7. 基于jQuery实现的Ajax 验证用户名唯一性

    基于jQuery实现的Ajax 验证用户名唯一性 前端jsp页面代码 <tr> <th><span class="requiredField"> ...

  8. jQuery 与 AJAX 实现失去焦点验证用户名是否合格

    JSP页面 <tr onmouseover="currentcolor=this.style.backgroundColor;this.style.backgroundColor='# ...

  9. AJAX与PHP（PHP笔记）--动态验证用户名

    在PHP基础的学习过程中经常会遇到对页面的局部刷新. 比如说,我们在填写用户名的同时,对数据库中的信息进行验证,检查是否充分. 这时就要用到AJAX实现页面的动态加载. 下面例子是简单的PHP与AJA ...

随机推荐

  1. EJB （not bound）

    问题: 在代码实在找不到错误的情况下,仍然报:XXXX not bound 问题产生过程: 通过下图方式创建的项目:EJBTest2_1 勾选下面两项,即可生成:EJBTest2_1EJB 和 EJB ...

  2. nyoj 1100 WAJUEJI which home strong！

    WAJUEJI which home strong! 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 在一个山沟里,姐弟俩同时考上了大学.但由于家里拮据,所以这并不是 ...

  3. Morris Traversal 二叉树遍历。

    那天做了个SWAP NODE的题,要求constant space,不得不Morris Traversal. 稍微研究了一下,真正意义上的O(1)space对二叉树进行遍历.好像是1979年的算法. ...

  4. Java反射机制学习

    Java 反射是Java语言的一个很重要的特征,它使得Java具体了“动态性”. 在Java运行时环境中,对于任意一个类,能否知道这个类有哪些属性和方法?对于任意一个对象,能否调用它的任意一个方法?答 ...

  5. 一步一步学android控件（之二十五）—— SeekBar

    SeekBar扩展自ProgressBar——在ProgressBar的基础上添加了一个用户可以拖拽的thum. SeekBar.OnSeekBarChangeListener是接收SeekBar进度 ...

  6. java数据结构-非线性结构之树

    一.树状图 树状图是一种数据结构,它是由n(n>=1)个有限节点组成的具有层次关系的集合.因其结构看起来想个倒挂的树,即根朝上,叶子在下,故被称为"树". 特点: 1. 每个 ...

  7. div+css的兼容性问题和解决方法

    1. 默认的内外边距不同 问题: 各个浏览器默认的内外边距不同 解决: *{margin:0;padding:0;}   2. 水平居中的问题 问题: 设置 text-align: center    ...

  8. Quartz定时任务学习（九）Quartz监听器

    Quartz 提供了三种类型的监听器:监听 Job 的,监听 Trigger 的,和监听 Scheduler 自已的. 本章解释如何应用每一种类型来更好的管理你的 Quartz 应用,并获悉到什么事件 ...

  9. 在Mybatis-spring中由于默认Autowired导致不能配置多个数据源的问题分析及解决

    在使用Mybatis中,通常使用接口来表示一个Sql Mapper的接口以及相对应的xml实现,而在spring的配置文件中,通常会使用MapperScannerConfigurer来达到批量扫描以及 ...

  10. XRDP与VNC的关系

    如果仅仅安装XRDP协议.是不能在windows上使用远程桌面连接到Ubuntu. 还须要安装VNCServer才行. 所以,XRDP启动之后.系统会自己主动启动一个VNC会话进程监听服务. 当我们通 ...