jsp+ajax實現無刷新(鼠標離開文本框即驗證用戶名)實現思路

2024-09-05 00:21:00

字體：大中小

來源：轉載

供稿：網友

jsp+ajax實現無刷新,鼠標離開文本框即驗證用戶名,很方便的功能，感興趣的朋友可以了解下，或許對你學習ajax無刷新有所幫助

jsp+ajax實現無刷新,鼠標離開文本框即驗證用戶名，操作如下：新建一個輸入頁面，起名為input.jsp,

復制代碼代碼如下:

<%@ page contentType="text/html; charset=utf-8"%>
<html>
<head>
<title>jsp+ajax實現無刷新_鼠標離開文本框即驗證用戶名</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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">
<table cellpadding="0"
cellspacing="0">
<tr>
<td></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>4-20 個字符 (包括大小寫字母,中文,數字,特殊字符等) 1個漢字等于2個字符，建議使用中文。注冊后不可修改。</div>";
}
}
</script>
<form method=post>
<table bordercolor="#96D6E8"
class="text12black">
<tr>
<td>
用戶名：
</td>
<td>
<INPUT type="text" value="" size=30
maxlength="50" onBlur="javaScript:CheckName();"
onFocus="return sl('passport1');" />
<br />
<div></div>
</td>
<td valign="top">
<div>
<span>4-20 個字符 (包括大小寫字母,中文,數字,特殊字符等)
1個漢字等于2個字符，建議使用中文昵稱。注冊后不可修改。</span>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>

在新建一個校驗頁面，起名為check.jsp,代碼如下：

復制代碼代碼如下:

<%@ page contentType="text/html; charset=utf-8"%>
<%
String action = "";
String groupname = "";
//檢查用戶名
//用作數據庫聯接，可以根據你的情況修改，如果為測試可以不用*作記號的語句
try {
action = request.getParameter("action");
groupname = request.getParameter("groupName").trim();
if ("".equals(groupname)) {
out.println("<div>用戶名不能為空！</div>");
} else if (groupname.length() < 4 || groupname.length() > 20) {
out.println("<div>用戶名"
+ groupname + "不合法！(長度為4到20位，且不能使用?#=等特殊字符)</div>");
} else if ("zhangsan".equals(groupname)) {
out.println("<div>" + "用戶名"
+ groupname + "已被占用，請重新輸入！</div>");
} else {
out.println("您的用戶名可用");
}
} catch (Exception e) {
System.out.println(request.getServletPath() + " error : "
+ e.getMessage());
}
%>