<%@ 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. 矩阵乘法 and BIOS loads MBR into 0x7C00?

    tianpeng <再谈矩阵与矩阵乘法> 讲的也好 矩阵乘矩阵 这个结果是怎么算出来的? 第一个矩阵第一行的每个数字(2和1),各自乘以第二个矩阵第一列对应位置的数字(1和1),然后将乘积 ...

  2. 一段网上java常见escape和unescape方法的BUG

    escape编码和unescape编码,就是将一个字符转换为16进制unicode编码,前面加%字符进行标识. 此处不再多做解释,参考这里:http://www.jb51.net/article/23 ...

  3. hdoj 1541 Stars【线段树单点更新+最大值维护】

    Stars Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  4. hdoj 4006 The kth great number【优先队列】

    The kth great number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65768/65768 K (Java/Oth ...

  5. PAT 1014. Waiting in Line

    Suppose a bank has N windows open for service.  There is a yellow line in front of the windows which ...

  6. DataGridView减少闪烁的解决办法

    Reducing flicker, blinking in DataGridView http://www.codeproject.com/Tips/390496/Reducing-flicker-b ...

  7. QTableWidget 导出到表格

    跳槽到了新的公司.開始苦逼的出差现场开发.接触到了新的应用.有非常多应用须要将Table导出成表格,能够把table导出成csv格式的文件. 跟大伙分享一下: lass TableToExcle : ...

  8. QT皮肤系统的动态切换

    应用需求: 提供皮肤切换选项,在不重启应用程序的情况下实现皮肤的动态切换. 理论基础: 1) 图片资源是如何被利用的 这里先简要说明一下实现原理,皮肤的动态切换其关键在于图片资源的加载方式.QT中每个 ...

  9. WCF - 消息

    SOAP SOAP是Simple Object Access Protocol(简单对象访问协议)的简称 而如今SOAP已经成为了符合W3C制定的SOAP规范的消息 允许您使用 XML 在通过低层 I ...

  10. Paxos算法之旅（四）zookeeper代码解析--转载

    ZooKeeper是近期比较热门的一个类Paxos实现.也是一个逐渐得到广泛应用的开源的分布式锁服务实现.被认为是Chubby的开源版,虽然具体实现有很多差异.ZooKeeper概要的介绍可以看官方文 ...