<%@ 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. Python按行读文件对比

    1. 最基本的读文件方法: # File: readline-example-1.py   file = open("sample.txt")   while 1:     lin ...

  2. Why do we need smart pointer and how to implement it.

    Here are two simple questions. Problem A #include <string> include <iostream> using name ...

  3. 什么时候使用Shell

    因为Shell似乎是各UNIX系统之间通用的功能,并且经过了POSIX的标准化.因此,Shell脚本只要“用心写”一次,即可应用到很多系统上.因此,之所以要使用Shell脚本是基于: 简单性:Shel ...

  4. Hibernate查询之Example查询

    org.hibernate.criterion.Example 类允许你通过一个给定实例构建一个条件查询. 此实例的属性值将做成查询条件. Cat cat = new Cat(); cat.setSe ...

  5. (linux shell)第一章--小试牛刀(上)

    来源:(linux shell)第一章--小试牛刀(上) 从今天開始,我们一起来学习<linux shell脚本攻略>这本书. 1.1简单介绍 shell脚本一般是一个以#!起始的文本文件 ...

  6. BZOJ 3265 志愿者招募增强版 单

    标题效果:同1061 只是间隔为每种类型的志愿工作是多级 这是卡网络流量?未知 所有在所有的1061您将可以更改为在稍微改变- - #include <cmath> #include &l ...

  7. Messages的例子

    13.33 13.36 13.37 Message.h #ifndef MESSAGE_H #define MESSAGE_H #include<iostream> #include< ...

  8. MySQL强化

    大纲: 数据约束 数据库设计(表设计) 关联查询(多表查询) 存储过程 触发器 mysql权限问题 1 数据约束 1.1 什么是数据约束 对用户操作表的数据进行约束. 1.2 约束种类 1.2.1 默 ...

  9. codeforces 132C Logo Turtle(dp)

    可以用三维dp来保存状态, dp[i][j][k]表示在前i个字符变换了j步之后方向为k(k = 1 or k = 0)的最优解,也就是离原点的最大距离.这里规定0方向为正方向,1位负方向,表示的是当 ...

  10. CEO、COO、CFO、CTO

    CEO.COO.CFO.CTO是什么意思? 网站里的各种职位: CEO(Chief executive officer)首席执行官 类似总经理.总裁,是企业的法人代表. COO(Chief opera ...