<%@ 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. Centos6.4 openNebula

    OpenNebula 是一套开源的云计算基础管理工具,用来方便管理员在数据中心统一部署.创建.分配和管理大量的虚拟机,企业数据中心可以利用这套工具搭建自己的私有云,为 自己内部提供 IaaS 服务,类 ...

  2. （转）Spring整合Redis作为缓存

           采用Redis作为Web系统的缓存.用Spring的Cache整合Redis. 一.关于redis的相关xml文件的写法 <?xml version="1.0" ...

  3. jsp 多条记录提交

    前端jsp页面可以通过form提交标有name属性值得input的value数据给服务器,其中如何传递数组形式呢?如下: 1.前端jsp页面 其中灰色的部分是一个循环出现的值,因此form提交后,后台 ...

  4. json中文编码问题

    在和微信接口交互的过程中需要传参json而里面有中文的存在,所以json_encode($data)编码后会形成 {"group":{"name":" ...

  5. Android源代码之Gallery专题研究（1）

    前言 时光飞逝,从事Android系统开发已经两年了,总想写点什么来安慰自己.思考了非常久总是无法下笔,认为没什么好写的.如今最终决定写一些符合大多数人需求的东西,想必使用过Android手机的人们一 ...

  6. Performing a thread dump in Linux or Windows--reference

    Linux/Unix 1. Find the Java/Tomcat process id. % ps ax | grep java You should see output like this 1 ...

  7. ubuntu中安装jdk 分类： java 学习笔记 linux ubuntu 2015-07-06 17:49 74人阅读 评论(0) 收藏

    参考文献:ubuntu 13.04 安装 JDK 先去oracle官网下载jdk,这一段我就不赘述了. 下载好之后先解压,解压方式参见 linux常用的压缩与解压缩命令 ,解压之后,将文件剪贴至/us ...

  8. Eclipse3.7中搭建Android开发环境文档教程和视频教程

    1.下载Eclipse3.7,登录http://www.eclipse.org/downloads/,下载Eclipse Classic 3.7: 2.安装ADT插件:下载好Eclipse后解压,运行 ...

  9. Django 初探--Django的开发服务器及创建数据库（笔记）

    1.Django的开发服务器 Django框架中包含一些轻量级的web应用服务器,开发web项目时不需再对其配置服务器,Django提供的内置服务器可以在代码修改时自动加载,从而实现网站的迅速开发. ...

  10. TCP/IP 协议理解

    TCP/IP 协议(Transmission Control Protocol / internet Protocol),因特网互联协议,又名网络通讯协议.通俗而言:TCP负责发现传输的问题,一有问题 ...