源代码：http://yuncode.net/code/c_50568c9a1baf841
jsp ajax 验证用户名是否存在 - 云代码 www.yuncode.net
2012-09-17 收藏(1) | 举报 作者：神马[jsp]代码
- jsp前台 input.jsp
- view sourceprint?001 <%@ page contentType="text/html; charset=GBK" %>
- 002 <html>
- 003 <style type="text/css">
- 004 <!--
- 005 @import url("../aqgc/style_c.css");
- 006 -->
- 007 </style>
- 008 <head>
- 009 <title>Ajax实例</title>
- 010 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
- 011 <style type="text/css">
- 012 <!--
- 013 .style1 {
- 014 color: #FF3333;
- 015 font-weight: bold;
- 016 }
- 017 .style14 {
- 018 font-size: 13px
- 019 }
- 020 .text12black {
- 021 font-size: 12px;
- 022 }
- 023 -->
- 024 </style>
- 025 </head>
- 026 <body bottomMargin="0" leftMargin="0" topMargin="0" rightMargin="0"
- 027 marginheight="0" marginwidth="0">
- 028 <center>
- 029 <table width="748" border="0" align="center" cellpadding="0"
- 030 cellspacing="0">
- 031 <tr>
- 032 <td height="5"></td>
- 033 </tr>
- 034 </table>
- 035 <script language="javascript">
- 036 //创建XMLHttpRequest对象
- 037 function GetO()
- 038 {
- 039 var ajax=false;
- 040 try
- 041 {
- 042 ajax = new ActiveXObject("Msxml2.XMLHTTP");
- 043 }
- 044 catch (e)
- 045 {
- 046 try
- 047 {
- 048 ajax = new ActiveXObject("Microsoft.XMLHTTP");
- 049 }
- 050 catch (E)
- 051 {
- 052 ajax = false;
- 053 }
- 054 }
- 055 if (!ajax && typeof XMLHttpRequest!='undefined')
- 056 {
- 057 ajax = new XMLHttpRequest();
- 058 }
- 059 return ajax;
- 060 }
- 061
- 062 function getMyHTML(serverPage, objID) {
- 063 var ajax = GetO();
- 064 //得到了一个html元素，在下面给这个元素的属性赋值
- 065 var obj = document.all[objID];
- 066 //设置请求方法及目标，并且设置为异步提交
- 067 ajax.open("post", serverPage, true);
- 068 ajax.onreadystatechange = function()
- 069 {
- 070 if (ajax.readyState == 4 && ajax.status == 200)
- 071 { //ajax.responseText是服务器的返回值，把值赋给id=passport1的元素的属性
- 072 //innerHTML这个属性或说这个变量表示一组开始标记和结束标记之间的内容
- 073 obj.innerHTML = ajax.responseText;
- 074 }
- 075 }
- 076 //发送请求
- 077 ajax.send(null);
- 078 }
- 079 function CheckGroupName()
- 080 {
- 081 getMyHTML("http://13.1.1.51:8080/ajax/check.jsp?groupName="+name_form.group_name.value, "passport1");
- 082 }
- 083 //这个函数的作用是当用户的焦点从其他地方回到group_name这个输入框时再给属性赋回原内容
- 084 function sl(tx)
- 085 {
- 086 if(tx=='passport1')
- 087 {
- 088 document.all[tx].innerHTML = "<div class='explain_blue' align='left'>4-20 个字符 (包括大小写字母,中文,数字,特殊字符等) 1个汉字等于2个字符，建议使用中文。注册后不可修改。</div>";
- 089 }
- 090 }
- 091 function check()
- 092 {
- 093 if(document.name_form.group_name.value.length<1)
- 094 {
- 095 alert("请您给您的群组取个名字！");
- 096 document.name_form.group_name.focus();
- 097 return false;
- 098 }
- 099 if(!OK())
- 100 {
- 101 return false;
- 102 }
- 103 document.name_form.action='addgroup.do';
- 104 document.name_form.target='_parent';
- 105 document.name_form.submit();
- 106 }
- 107 function OK()
- 108 {
- 109 var obj = document.getElementById("passport1");
- 110 if(obj.innerHTML.indexOf("可用")==-1)
- 111 {
- 112 return false;
- 113 }
- 114 return true;
- 115 }
- 116 </script>
- 117 <form name="name_form" method=post>
- 118 <td height="200" valign="top"><table width="100%" height="270" border="1" bordercolor="#96D6E8"
- 119 class="text12black">
- 120 <tr>
- 121 <td width="22%" height="20" align="right">用户名：</td>
- 122 <td width="61%" align="left"><INPUT name="group_name" type="text"
- 123 value="" size=30 maxlength="50" onBlur="javaScript:CheckGroupName();"
- 124 onFocus="return sl('passport1');" /></td>
- 125 <td id="passport1" valign="top"><div class="explain_blue" align='left'><span class="gray">4-20
- 126 个字符 (包括大小写字母,中文,数字,特殊字符等) 1个汉字等于2个字符。</span></div></td>
- 127 </tr>
- 128 </table></td>
- 129 </form>
- 130 </BODY>
- 131 </html>
- jsp后台处理 check.jsp
- view sourceprint?01 <%@ page contentType="text/html; charset=GB2312"%>
- 02 <%@ page import="java.io.*"%>
- 03 <%@ page import="java.sql.*"%>
- 04 <%@ page import="javax.sql.DataSource"%>
- 05 <%@ page import="javax.naming.InitialContext"%>
- 06 <%@ page import="java.util.Properties"%>
- 07 <%@ page import="java.util.Hashtable"%>
- 08 <%@ page import="thtf.website.admin.CommonBean"%>
- 09 <%
- 10 String action = "";
- 11 String groupname = "";
- 12 // 检查用户名
- 13
- 14 // 用作数据库联接，可以根据你的情况修改，如果为测试可以不用*作记号的语句
- 15 InitialContext ctx = null;
- 16 DataSource ds = null;
- 17 Connection conn = null;
- 18 Statement stmt = null;
- 19 ResultSet rs = null;
- 20
- 21 try {
- 22
- 23 action = request.getParameter("action");
- 24 groupname = request.getParameter("groupName").trim();
- 25 if ("".equals(groupname)) {
- 26 System.out.println("null");
- 27 out.println("<div class='explain_blue' align='left'>用户名不能为空！</div>");
- 28 } else if (groupname.length() < 4 || groupname.length() > 20) {
- 29 out.println("<div class='explain_blue' align='left'>用户名"
- 30 + groupname + "不合法！(长度为4到20位，且不能使用?#=等特殊字符)</div>");
- 31 } else {
- 32
- 33 ctx = new InitialContext();
- 34 ds = (DataSource) ctx.lookup("java:/student");
- 35 conn = ds.getConnection();
- 36 stmt = conn.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE,
- 37 ResultSet.CONCUR_READ_ONLY);
- 38 String strsql = "select userinfo_name from personal_userinfo where userinfo_name='"
- 39 + groupname + "'";
- 40 rs = stmt.executeQuery(strsql);
- 41 if (rs.next()) {
- 42 out.println("<div class='explain_blue' align='left'>用户名"
- 43 + groupname + "已被占用，请重新输入！</div>");
- 44 } else {
- 45 out.println("您的用户名可用");
- 46 }
- 47 }
- 48
- 49 } catch (Exception e) {
- 50 System.out.println(request.getServletPath() + " error : "
- 51 + e.getMessage());
- 52 } finally {
- 53 if (rs != null)
- 54 rs.close();
- 55 if (stmt != null)
- 56 stmt.close();
- 57 if (conn != null)
- 58 conn.close();
- 59 }
- 60 %>
