讲解网站一般都有的一个功能，就是注册时候的，实现验证用户名是否存在的功能。
源代码演示：
reg.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>myAjax</title>
<script type="text/javascript">
function val(obj){
var name = obj.value;//.value就是input中的name属性值
if(name!=null&&name!=""){
document.getElementById("regName").value=name;
document.forms[1].submit();//让第二个表单提交
}else{
msg.innerHTML="请输入用户名！";
}
}
function ajaxBack(res){
if(res==1){
parent.document.getElementById("msg").innerHTML="用户名已经存在，请更换用户名！";
}else{
msg.innerHTML="恭喜，可以注册！";
//id也可以直接这样用
}
}
</script>
</head>
<body>
<h2>演示myAjax---隐藏帧技术</h2>
<br/>
<h2>用户注册</h2>
<form action="<%= request.getContextPath() %>/RegServlet" method="post">
Name:<input type="text" name="name" onblur="val(this)"/>
<label id="msg" style="color:red;"></label><br/>
Password:<input type="password" name="pwd"/><br/>
Tel:<input type="text" name="tel"/><br/>
<input type="submit" value="注册">
</form>
<form target="dataFrame" action="<%= request.getContextPath() %>/ValServlet" method="post">
<input type="hidden" id="regName" name="name"/>
<!-- type="hidden" 表示这个input是隐藏的，网页不可见. target 属性规定在何处打开 action URL。 -->
</form>
<!-- iframe创建包含另外一个文档的内联框架（即行内框架）。 -->
<iframe style="display:none" name="dataFrame" ></iframe>
</body>
</html>
web.xml:
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
<display-name></display-name>
<servlet>
<servlet-name>RegServlet</servlet-name>
<servlet-class>cn.hncu.reg.servlet.RegServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>ValServlet</servlet-name>
<servlet-class>cn.hncu.reg.servlet.ValServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>RegServlet</servlet-name>
<url-pattern>/RegServlet</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>ValServlet</servlet-name>
<url-pattern>/ValServlet</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
RegServlet.java:
package cn.hncu.reg.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class RegServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
request.setCharacterEncoding("utf-8");
String name = request.getParameter("name");
String ped = request.getParameter("pwd");
String tel = request.getParameter("tel");
if(name.startsWith("hncu")){//如果是正式做，这里要去后台进行注册，这里简化了。
out.print("注册成功！"+name);
}else{
out.print("注册失败：用户名必须以hncu开头");
}
}
}
ValServlet.java:
package cn.hncu.reg.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ValServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
request.setCharacterEncoding("utf-8");
String name = request.getParameter("name");
String pwd = request.getParameter("pwd");
String tel = request.getParameter("tel");
if(name!=null && name.trim().length()>0 && name.startsWith("hncu") ){//正式项目，需要去后台校验数据的
request.setAttribute("error", 0);//这是可以注册的
}else{
request.setAttribute("error", 1);//不能注册，该用户名已经存在！
}
//转发
request.getRequestDispatcher("/jsps/regResult.jsp").forward(request, response);
}
}
regResult.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
<h2>这是结果页面</h2>
错误代码：${error }
<script type="text/javascript">
var res ="<%=request.getAttribute("error")%>";
/*
if(res==1){
parent.document.getElementById("msg").innerHTML="用户名已经存在，请更换用户名！";
}else{
parent.document.getElementById("msg").innerHTML="恭喜，可以注册！";
}
//parent.document--表示父页面的document对象
//这种方式可以用，但不是很好。我们最好用下面那一句调用父页面的方法解决
*/
parent.ajaxBack(res);
</script>
</body>
</html>
演示结果：
真正的实现之后，是这样的：
时间： 2024-08-08 05:17:25