jsp+ajax实现无刷新，鼠标离开文本框即验证用户名

jsp+ajax实现无刷新，鼠标离开文本框即验证用户名（本功能多用于注册） input.jsp(表单提交页面)： %@ page contentType=text/html; charset=GBK % html style type=text/css !-- @import url(../aqgc/style_c.css); --
jsp+ajax实现无刷新，鼠标离开文本框即验证用户名（本功能多用于注册）

input.jsp(表单提交页面)：
 
<%@ page contentType="text/html; charset=GBK" %>
<html>
<style type="text/css">
<!--
@import url("../aqgc/style_c.css");
-->
</style>
<head>
<title>Ajax实例</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
.style1 {
color: #FF3333;
font-weight: bold;
}
.style14 {font-size: 13px}

.text12black {
font-size: 12px;
}
-->
</style>
</head>
<body bottomMargin="0" leftMargin="0" topMargin="0" rightMargin="0" marginheight="0" marginwidth="0">
<center>
<table width="748" border="0" align="center" cellpadding="0" cellspacing="0">
   <tr>
     <td height="5"></td>
   </tr>
</table>
<script language="javascript">
   <!--
   //创建XMLHttpRequest对象
 function GetO()
 {
   var ajax=false;
    try
    {
     ajax = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e)
    {
      try
      {
       ajax = new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch (E)
      {
       ajax = false;
      }
    }
    if (!ajax && typeof XMLHttpRequest!='undefined')
    {
     ajax = new XMLHttpRequest();
    }
    return ajax;
 }
 
 function getMyHTML(serverPage, objID) {
   var ajax = GetO();
    //得到了一个html元素，在下面给这个元素的属性赋值
 var obj = document.all[objID];
    //设置请求方法及目标，并且设置为异步提交
 ajax.open("post", serverPage, true);
 ajax.onreadystatechange = function()
 {
    if (ajax.readyState == 4 && ajax.status == 200)
    {
    //innerHTML是HTML元素的属性，如果您不理解属性那就理解为HTML元素的变量
    //ajax.responseText是服务器的返回值，把值赋给id=passport1的元素的属性
    //innerHTML这个属性或说这个变量表示一组开始标记和结束标记之间的内容
     obj.innerHTML = ajax.responseText;
    }
   }
    //发送请求
 ajax.send(null);
   }
   function CheckName()
   {
      getMyHTML("check.jsp?groupName="+name_form.group_name.value, "passport1");
   }
   //这个函数的作用是当用户的焦点从其他地方回到group_name这个输入框时再给属性赋回原内容
 function sl(tx)
   {
    if(tx=='passport1')
   {
      document.all[tx].innerHTML = "<div class='reds' align='left'>4-20 个字符 (包括大小写字母,中文,数字,特殊字符等) 1个汉字等于2个字符，建议使用中文。注册后不可修改。</div>";
     }
   }

</script>
<form name="name_form"  method=post>
<td height="200" valign="top" >
<table width="100%" height="270" border="1" bordercolor="#96D6E8" class="text12black">
   <tr>
      <td width="22%" height="20" align="right">用户名：</td>
      <td width="61%" align="left">
          <INPUT name="group_name"  type="text" value="" size=30 maxlength="50" onBlur="javaScript:CheckName();" onFocus="return sl('passport1');" /><br/>
          <div id = "passport1" style="color: red"></div>
      </td>
      <td  id="passport2"  valign="top"><div class="explain_blue" align='left' ><span class="gray">4-20 个字符 (包括大小写字母,中文,数字,特殊字符等) 1个汉字等于2个字符，建议使用中文昵称。注册后不可修改。</span></div>
      </td>
    </tr>
</table>
    </td>
  </form>
</BODY>
</html>

check,jsp  (验证页面)：

<%--
/*************************************************************************
*    Title: check.jsp                                                 *
*    @CreateDate 2010/09/01: 检查用户注册信息合法性                                    *
*    @Author : 竹林居者      2010/09/01    created                       *
*                                                                        *
**************************************************************************/
--%>
<%@ page contentType="text/html; charset=GB2312" %>
<%@ page import="java.io.*" %>
<%@ page import="java.sql.*" %>
<%@ page import="javax.sql.DataSource"%>
<%@ page import="javax.naming.InitialContext"%>
<%@ page import="java.util.Properties"%>
<%@ page import="java.util.Hashtable"%>

<jsp:useBean id="db" scope="page" class="s2jsp.bysj.dao.BaseDao"></jsp:useBean>
<%
  String action="";
  String groupname="";
//检查用户名

//用作数据库联接，可以根据你的情况修改，如果为测试可以不用*作记号的语句
Connection conn        = null;
PreparedStatement pstmt = null;
ResultSet rs           = null;

try
{
 
   action=request.getParameter("action");
   groupname=request.getParameter("groupName").trim();
  if("".equals(groupname))
  {
   System.out.println("null");
   out.println("<div class='reds' align='left'>用户名不能为空！</div>");
  }
else if(groupname.length()<4 || groupname.length()>20 )
  {
   out.println("<div class='reds' align='left'>用户名"+groupname+"不合法！(长度为4到20位，且不能使用?#=等特殊字符)</div>");
  }
else
  {

conn = db.getConn();
  String strsql="select userName from USERS where userName='"+groupname+"'";
  pstmt = conn.prepareStatement(strsql);
 
   rs = pstmt.executeQuery();
    if(rs.next())
    {
     out.println("<div class='reds' align='left'>"+"用户名"+groupname+"已被占用，请重新输入！</div>");
    }
    else
    {
   out.println("您的用户名可用");
    }
}

}
catch (Exception e){
System.out.println(request.getServletPath()+" error : " + e.getMessage());
}
finally {
  db.closeAll(conn,pstmt,rs);
}
%>

jsp+ajax实现无刷新的更多相关文章

  1. 使用ajax实现无刷新改变页面内容

    如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1 <%@ Page Language="C#" ...

  2. window.history.pushState与ajax实现无刷新更新页面url

    ajax能无刷新更新数据,但是不能更新url HTML5的新API: window.history.pushState, window.history.replaceState 用户操作history ...

  3. Ajax 实现无刷新分页

    Ajax 实现无刷新分页

  4. Ajax 实现无刷新页面

    注意:如本文所用,在前面的文章库的数目可以在源代码中找到,我将指示在文本,其中链路,为了缩短制品的长度,阅读由此带来的不便.乞求被原谅. 评论文章 Ajax 实现无刷新页面.其原理.代码库.代码. 这 ...

  5. PHP+Ajax+plupload无刷新上传头像代码

    很简单的一款PHP+Ajax+plupload无刷新上传头像代码,兼容性很好,可以直接拿来用.你可以自定义各种类型的文件.本实例中只能上传"jpg", "png" ...

  6. jQuery+php+ajax实现无刷新上传文件功能

    jQuery+php+ajax实现无刷新上传文件功能,还带有上传进度条动画效果,支持图片.视频等大文件上传. js代码 <script type='text/javascript' src='j ...

  7. ajax ＋jsp＋iframe无刷新上传文件[转]

    http://hi.baidu.com/zj360202/blog/item/f23e3711f929c774cb80c475.html ajax jsp 无刷新上传文件 2009-10-26 16: ...

  8. jQuery AJAX 网页无刷新上传示例

    新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...

  9. 在Thinkphp中使用AJAX实现无刷新分页

    在Thinkphp目录的Lib\ORG\Util\目录里新建AjaxPage.class.php,写入一下内容: <?php // +------------------------------ ...

随机推荐

  1. BZOJ4127: Abs

    Description 给定一棵树,设计数据结构支持以下操作 1 u v d 表示将路径 (u,v) 加d 2 u v 表示询问路径 (u,v) 上点权绝对值的和 Input 第一行两个整数n和m,表 ...

  2. Resharp最新破解方法

    ReSharper是一个JetBrains公司出品的著名的代码生成工具,其能帮助Microsoft Visual Studio成为一个更佳的IDE.它包括一系列丰富的能大大增加C#和Visual Ba ...

  3. JS文档生成工具：JSDoc 介绍

    JSDoc是一个根据javascript文件中注释的信息,生成API文档的工具.生成的文档是html文件.类似JavaDoc和PHPDoc. 用法 /** 一坨注释之类的 */JSDoc会从/**开头 ...

  4. Dependency Injection

    Inversion of Control - Dependency Injection - Dependency Lookup loose coupling/maintainability/ late ...

  5. MRP运算生成采购单时间的逻辑

    由MRP运算产生的采购单日期,由生产单指定的安排计划日期.公司设置里的采购提前期和隐藏的供应商供货提前期三个字段共同决定. 可以很容易的在系统中找到,供应商供货提前期,需要在产品视图中将字段selle ...

  6. webapp 侧边导航效果

    @media (max-width: 767px) .main-sidebar, .left-side { -webkit-transform: translate(-230px, 0); -ms-t ...

  7. linux笔记二-----目录及文件命令

    一:目录及文件操作 1.file:识别文件类型 如果是文本文件,会显示ASCII: 如果是执行会显示shell script: 如果链接文件显示链接执行文件等信息 2.touch:改变文件或目录时间. ...

  8. spring security自定义拒绝访问页面

    如果试图访问一个没有访问权限的页面,那么页面会出现403 访问错误. 如果我们希望自定义访问拒绝页面,只需要随便创建一个jsp页面,让后将这个页面的位置放到配置文件中. 下面创建一个accessDen ...

  9. 非静态的字段、方法或属性“System.Web.UI.Page.ClientScript...”要求对象引用 (封装注册脚本)

    在写项目时想对asp.net的注册前台脚本事件进行封装,就添加了一个BasePage.cs页面,但一直报错‘非静态的字段.方法或属性“System.Web.UI.Page.ClientScript.. ...

  10. ZedBoard 引脚约束参考

    从ISE转换到Vivado时,UCF转XDC的几种方法: (1)软件自动转换 参考网址:Youtube 用ISE->EDK->PlanAhead打开所需转换的工程文件*.xise,并打开b ...