<%@ 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. Eclipse SVN插件安装与使用（2014.12.27——by小赞）

    安装参考:http://www.cnblogs.com/xdp-gacl/p/3497016.html 用法参考:http://blog.sina.com.cn/s/blog_8a3d83320100 ...

  2. 斐波那契fib

    输入N和N个数(N<=10,每个数<=10^17),对于每个数,要输出能用几个斐波那契数加加减减得到 样例输入: 35101070 样例输出: 124 直接拷题解: fib[i]表示斐波那 ...

  3. 机器学习笔记1——Linear Regression with One Variable

    Linear Regression with One Variable Model Representation Recall that in *regression problems*, we ar ...

  4. Spring各种注解标签作用详解

    @Autowired和@Resource等注解是将Spring容器中的bean注入到属性,而@Component等注解是将bean放入Spring容器中管理. @Autowired spring2.1 ...

  5. PHP技术开发微信公众平台

    这篇文章主要介绍了微信公众平台的两种模式(编辑模式和开发模式)顾名思义编辑模式就是写普通的功能,开发模式具有更多的功能,下面主要是针对开发模式做介绍,需要的朋友可以参考下 下面通过图文并茂的方式介绍微 ...

  6. 【AOS应用基础平台】完好了AOS标签库，和标准标签库完美兼容了

    [金码坊AOS开发平台]今天①完好了AOS标签库,和标准标签库完美兼容了.②新开发了依据子页面动态生成主页面的二级导航菜单功能.#AOS开发平台#

  7. springMVC3学习(八)--全球异常处理

    在springMVC在配置文件: <bean id="exceptionResolver" class="org.springframework.web.servl ...

  8. 固定ip

    192.168.1.111 255.255.255.0 192.168.1.1 8.8.8.8 202.96.134.33

  9. linux下的openoffice安装和服务自启动

    openoffice下载并安装 wget http://sourceforge.net/projects/openofficeorg.mirror/files/4.1.1/binaries/zh-CN ...

  10. Binding 中 Elementname，Source，RelativeSource 三种绑定的方式

    在WPF应用的开发过程中Binding是一个非常重要的部分. 在实际开发过程中Binding的不同种写法达到的效果相同但事实是存在很大区别的. 这里将实际中碰到过的问题做下汇总记录和理解. 1. so ...