轉用：http://yuncode.net/code/c_50568c9a1baf841
jsp前臺 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) |
{ //ajax.responseText是服務器的返回值，把值賦給id=passport1的元素的屬性 |
//innerHTML這個屬性或說這個變量表示一組開始標記和結束標記之間的內容 |
obj.innerHTML
= ajax.responseText; |
} |
} |
//發送請求 |
ajax.send(null); |
} |
function CheckGroupName() |
{ |
getMyHTML("http://13.1.1.51:8080/ajax/check.jsp?groupName="+name_form.group_name.value, "passport1"); |
} |
//這個函數的作用是當用戶的焦點從其他地方回到group_name這個輸入框時再給屬性賦回原內容 |
function sl(tx) |
{ |
if(tx=='passport1') |
{ |
document.all[tx].innerHTML
= "<div
class='explain_blue' align='left'>4-20 個字符 (包括大小寫字母,中文,數字,特殊字符等) 1個漢字等於2個字符，建議使用中文。註冊後不可修改。</div>"; |
} |
} |
function check() |
{ |
if(document.name_form.group_name.value.length<1) |
{ |
alert("請您給您的羣組取個名字！"); |
document.name_form.group_name.focus(); |
return false; |
} |
if(!OK()) |
{ |
return false; |
} |
document.name_form.action='addgroup.do'; |
document.name_form.target='_parent'; |
document.name_form.submit(); |
} |
function OK() |
{ |
var obj
= document.getElementById("passport1"); |
if(obj.innerHTML.indexOf("可用")==-1) |
{ |
return false; |
} |
return true; |
} |
</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:CheckGroupName();" |
onFocus="return
sl('passport1');" /></td> |
<td
id="passport1" valign="top"><div
class="explain_blue" align='left'><span
class="gray">4-20 |
個字符
(包括大小寫字母,中文,數字,特殊字符等) 1個漢字等於2個字符。</span></div></td> |
</tr> |
</table></td> |
</form> |
</BODY> |
</html> |
jsp後臺處理 check.jsp
<%@
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"%> |
<%@
page import="thtf.website.admin.CommonBean"%> |
<% |
String
action = ""; |
String
groupname = ""; |
//
檢查用戶名 |
//
用作數據庫聯接，可以根據你的情況修改，如果爲測試可以不用*作記號的語句 |
InitialContext
ctx = null; |
DataSource
ds = null; |
Connection
conn = null; |
Statement
stmt = 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='explain_blue' align='left'>用戶名不能爲空！</div>"); |
} else if (groupname.length()
< 4 ||
groupname.length() > 20)
{ |
out.println("<div
class='explain_blue' align='left'>用戶名" |
+
groupname + "不合法！(長度爲4到20位，且不能使用?#=等特殊字符)</div>"); |
} else { |
ctx
= new InitialContext(); |
ds
= (DataSource) ctx.lookup("java:/student"); |
conn
= ds.getConnection(); |
stmt
= conn.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE, |
ResultSet.CONCUR_READ_ONLY); |
String
strsql = "select
userinfo_name from personal_userinfo where userinfo_name='" |
+
groupname + "'"; |
rs
= stmt.executeQuery(strsql); |
if (rs.next())
{ |
out.println("<div
class='explain_blue' align='left'>用戶名" |
+
groupname + "已被佔用，請重新輸入！</div>"); |
} else { |
out.println("您的用戶名可用"); |
} |
} |
} catch (Exception
e) { |
System.out.println(request.getServletPath()
+ "
error : " |
+
e.getMessage()); |
} finally { |
if (rs
!= null) |
rs.close(); |
if (stmt
!= null) |
stmt.close(); |
if (conn
!= null) |
conn.close(); |
} |
%> |