应用ajax实现检测注册用户名是否已经存在
前面写了一些ajax基础知识，那么具体如何应用？
在这里我将我3月12课件中的一个例子整理下来！
主要实现了用户注册自动检测用户名是否已经存在的功能！
类似 http://bbs.langsin.com/register.php，输入用户名注册可以检测是否已经存在，不过该网站的这个功能并没有应用ajax，而是类似服务器控件的回传，使整个页面有刷新。
这里还是使用的《 一个简单的Ajax开发框架》一文ajax小框架来做！开发工具选择Eclipse！
Step1：新建一个WEB项目，做一个login.jsp页面
login.jsp
<%
@ page contentType="text/html; charset=gb2312"%>
<%@ page import="eflylab.ajax.login.*"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Ch06--案例：数据校验</title>
<link href="../../css/style.css" rel="stylesheet" type="text/css">
<script language="javascript" src="../../ajax.js"></script><!-- 引入JS -->
<script language="javascript">
function doCheck(type) {
var f = document.forms[0];
if("user"==type) {
if(f.username.value!="") {
document.getElementById("feedback_info").innerHTML = "系统正在处理您的请求，请稍后。";
send_request("GET","registerCheck.jsp?field=username&value="+f.username.value,null,"text",showFeedbackInfo);
}
else {
document.getElementById("feedback_info").innerHTML = "请输入用户名称。";
}
}
else if("email"==type) {
if(f.email.value!="") {
//正则表达式来检测电子邮件的格式
var pattern = /^[/w＼./-/_]+@{1}/w+(/.{1}/w+)+$/;
var result = pattern.exec(f.email.value);
if(result==null) window.alert("电子邮件格式错误，请按标准email名称格式填写,如：hello@sohu.com。");
else {
document.getElementById("feedback_info").innerHTML = "系统正在处理您的请求，请稍后。";
send_request("GET","registerCheck.jsp?field=email&value="+f.email.value,null,"text",showFeedbackInfo);
}
}
else {
document.getElementById("feedback_info").innerHTML = "请输入电子邮件。";
}
}
}
//处理服务器回传信息函数
function showFeedbackInfo() {
if (http_request.readyState == 4) { // 判断对象状态
if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
//alert(http_request.responseText);
document.getElementById("feedback_info").innerHTML = http_request.responseText;
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
function aa()
{
alert('OK');
}
</script>
</head>
<body><center>
<form name="form1" method="post" action="">
<table width="500" border="0" cellspacing="0" cellpadding="4">
<caption>用户注册</caption>
<tr>
<td width="70">用户名称：</td>
<td width="414">
<input name="username" id="username" type="text" class="form_text" size="40" onBlur="doCheck('user')">
<input name="userCheck" type="button" class="button" id="userCheck" value="唯一性检查" onClick="doCheck('user')">
</td>
</tr>
<tr>
<td>密码：</td>
<td><input name="password" type="password" class="form_text" id="password" size="40"></td>
</tr>
<tr>
<td>电子邮件：</td>
<td><input name="email" type="text" class="form_text" id="email" size="40">
<input name="emailCheck" type="button" class="button" id="emailCheck" value="唯一性检查" onClick="doCheck('email')">
</td>
</tr>
<tr>
<td colspan="2"><label id="feedback_info" style="color:#FF0000"> </label></td>
</tr>
<tr align="center">
<td colspan="2"><input name="Submit" type="submit" class="button" value="提交"></td>
</tr>
</table>
</form>
</center>
</body>
</html>
在上面的login.jsp中 用户姓名一块触发了一个Javascript. 提交到registerCheck.jsp处理。
registerCheck.jsp
<%@ page contentType="text/html; charset=gb2312"%>
<%@ page import="eflylab.ajax.login.*"%>
<%
String field = request.getParameter("field");
String value = request.getParameter("value");
UserService service = new UserService();
if("username".equalsIgnoreCase(field)) {
UserValue user = service.findUserByName(value);
if(user!=null) out.println("用户名称["+value+"]已经被注册，请更换其他用户名称再注册。");
else out.println("用户名称["+value+"]尚未被注册，您可以继续。");
}
else if("email".equalsIgnoreCase(field)) {
try {
UserValue user = service.findUserByEmail(value);
if(user!=null) out.println("电子邮件["+value+"]已经被注册，请更换其他用户名称再注册。");
else out.println("电子邮件["+value+"]尚未被注册，您可以继续。");
}catch(Exception ex) {
out.println(ex.toString());
}
}
else {
out.println("参数错误。");
}
%>
该页面调用javabean进行处理，然后在javabean中我们可以从数据库中检测数据，然后将结果返回！
login.jsp页面主要使用了responseTEXT来进行处理！
我们看到效果了！
在这里我将我3月12课件中的一个例子整理下来！
主要实现了用户注册自动检测用户名是否已经存在的功能！
类似 http://bbs.langsin.com/register.php，输入用户名注册可以检测是否已经存在，不过该网站的这个功能并没有应用ajax，而是类似服务器控件的回传，使整个页面有刷新。
这里还是使用的《 一个简单的Ajax开发框架》一文ajax小框架来做！开发工具选择Eclipse！
Step1：新建一个WEB项目，做一个login.jsp页面
login.jsp
<%@ page contentType="text/html; charset=gb2312"%><%@ page import="eflylab.ajax.login.*"%><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>Ch06--案例：数据校验</title><link href="../../css/style.css" rel="stylesheet" type="text/css"><script language="javascript" src="../../ajax.js"></script><!-- 引入JS --><script language="javascript">function doCheck(type) { var f = document.forms[0]; if("user"==type) { if(f.username.value!="") { document.getElementById("feedback_info").innerHTML = "系统正在处理您的请求，请稍后。"; send_request("GET","registerCheck.jsp?field=username&value="+f.username.value,null,"text",showFeedbackInfo); } else { document.getElementById("feedback_info").innerHTML = "请输入用户名称。"; } } else if("email"==type) { if(f.email.value!="") { //正则表达式来检测电子邮件的格式 var pattern = /^[/w＼./-/_]+@{1}/w+(/.{1}/w+)+$/; var result = pattern.exec(f.email.value); if(result==null) window.alert("电子邮件格式错误，请按标准email名称格式填写,如：hello@sohu.com。"); else { document.getElementById("feedback_info").innerHTML = "系统正在处理您的请求，请稍后。"; send_request("GET","registerCheck.jsp?field=email&value="+f.email.value,null,"text",showFeedbackInfo); } } else { document.getElementById("feedback_info").innerHTML = "请输入电子邮件。"; } }}//处理服务器回传信息函数function showFeedbackInfo() { if (http_request.readyState == 4) { // 判断对象状态 if (http_request.status == 200) { // 信息已经成功返回，开始处理信息 //alert(http_request.responseText); document.getElementById("feedback_info").innerHTML = http_request.responseText; } else { //页面不正常 alert("您所请求的页面有异常。"); } }}function aa(){ alert('OK');}</script></head><body><center><form name="form1" method="post" action=""> <table width="500" border="0" cellspacing="0" cellpadding="4"> <caption>用户注册</caption> <tr> <td width="70">用户名称：</td> <td width="414"> <input name="username" id="username" type="text" class="form_text" size="40" onBlur="doCheck('user')"> <input name="userCheck" type="button" class="button" id="userCheck" value="唯一性检查" onClick="doCheck('user')"> </td> </tr> <tr> <td>密码：</td> <td><input name="password" type="password" class="form_text" id="password" size="40"></td> </tr> <tr> <td>电子邮件：</td> <td><input name="email" type="text" class="form_text" id="email" size="40"> <input name="emailCheck" type="button" class="button" id="emailCheck" value="唯一性检查" onClick="doCheck('email')"> </td> </tr> <tr> <td colspan="2"><label id="feedback_info" style="color:#FF0000"> </label></td> </tr> <tr align="center"> <td colspan="2"><input name="Submit" type="submit" class="button" value="提交"></td> </tr> </table></form></center></body></html>
registerCheck.jsp
<%@ page contentType="text/html; charset=gb2312"%><%@ page import="eflylab.ajax.login.*"%><%String field = request.getParameter("field");String value = request.getParameter("value");UserService service = new UserService();if("username".equalsIgnoreCase(field)) { UserValue user = service.findUserByName(value); if(user!=null) out.println("用户名称["+value+"]已经被注册，请更换其他用户名称再注册。"); else out.println("用户名称["+value+"]尚未被注册，您可以继续。");}else if("email".equalsIgnoreCase(field)) { try { UserValue user = service.findUserByEmail(value); if(user!=null) out.println("电子邮件["+value+"]已经被注册，请更换其他用户名称再注册。"); else out.println("电子邮件["+value+"]尚未被注册，您可以继续。"); }catch(Exception ex) { out.println(ex.toString()); }}else { out.println("参数错误。");}%>
login.jsp页面主要使用了responseTEXT来进行处理！
我们看到效果了！
141
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
