实验四、servlet处理表单
1、实验内容：
编写一个名为feedbackservlet的servlet
能够接收第三次实验的feedback.html的表单数据
输入响应：将收到的数据输出到响应端：例如“xxx您好（其中xxx是用户在表单输入的姓名），你的建议已经收到”
注意：需要将将第三次实验的feedback.html的表单提交地址改为当前servlet的url pattern
2、实验步骤：
本次实验我使用的是eclipse，所以一下步骤是在eclipse环境下进行的
(1)在所有Java运行所需要的环境都已经准备好的环境中，安装tomcat插件并且为其配置环境。
(2)创建一个名为Webserclet(本实验没有使用feedbackservlet作为名字)的servlet，按实验要求完善servlet，使用注解来配置servlet的配置信息。
(3)写一个名为vbnmh.html的html文件（此处没有使用feedback作为名字），html的内容即是实验三中feedback.html的内容，将其中表单提交地址为action=”Webservlet”
3.主要代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- vbnmh.html -->
<html >
<head >
<title>表单的创建</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
.form1{
border: 1px solid;
text-align: left;
width: 500px;
top: 5px;
}
textarea{
width: 20em;
height: 10em;
display: block;
margin: 10px;
}
</style>
<script>
window.οnlοad=toload;
function toload(){
var timelabel=document.getElementById("timelabel");
var date=new Date();
//date.setTime(date.getTime()+2*60*60*1000); //用于调试
var h=date.getHours();
if(h>=6&&h<12){
timelabel.innerText="早上好";
}else if(h>=12&&h<19){
timelabel.innerText="下午好";
}else if(h>=19&&h<23){
timelabel.innerText="晚上好";
}else{
timelabel.innerText="夜深了！请注意休息!!!";
}
}
//用于判断输入是否合法
function Check(form){
var N1=document.getElementById("name1");
var N2=document.getElementById("name2");
var N3=document.getElementById("name7");
var N4=document.getElementById("name4");
var N5=document.getElementById("name5");
if(N1.value.replace(/(^\s*)|(\s*$)/g,"")==""||N2.value.replace(/(^\s*)|(\s*$)/g,"")==""||N3.value.replace(/(^\s*)|(\s*$)/g,"")==""||N4.value.replace(/(^\s*)|(\s*$)/g,"")==""||N5.value.replace(/(^\s*)|(\s*$)/g,"")=="")
{
alert("输入不能为空");
return false;
} else{
var mobiles=document.getElementById("name2").value;
/*var youxiang=document.getElementById("name3").value;*/
var reg=/^1\d{10}$/; //正则表达式
var bb=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;//正则表达式
if(reg.test(mobiles)==false){
alert("号码错误");
document.getElementById("name2").focus();//联系电话框重新获得焦点
return false;
}else if(bb.test(N3.value)==false){
alert("邮箱错误");
N3.focus();//联系电话框重新获得焦点
return false;
}else{
alert("所有信息合法可以提交信息");
form.action="Webservlet";//此前是按照例子写了个form.action="upsave.jsp"
form.submit();
}
}
}
//window.οnbefοreunlοad=onunload_message; 在目前多数浏览器中，当卸载事件发生后onunload事件才会被触发
//但是此时页面已经被销毁所以confirm方法已经被锁定销毁了，所以不能弹出提示框，即此方法几乎没什么作用
window.οnbefοreunlοad=onunload_message;
function onunload_message(){
var B=confirm("你确定退出当前页面吗？");
if(B){
//window.close();
}
}
</script>
</head>
<body>
<h1>表单的简单创建</h1>
<hr>
<form action="Webservlet" method="post" name="form1" class="form1">
<label for="name1">用户名字：</label>
<input type="text" name="name1" id="name1">
<br><br>
<label for="name2">联系电话：</label>
<input type="text" name="name2" id="name2">
<br><br>
<label for="name7">联系邮箱：</label>
<input type="email" name="name7" id="name7">
<br>
<br>
<label for="name4">留言标题：</label>
<input type="text" name="name4" id="name4">
<br>
<textarea name="name5" id="name5">请在此处编辑您的留言</textarea>
<input type="reset" value="重置">
<input type="submit" value="提交" οnclick="return Check(this.form)"> <!-- 此处必须使用return来判断是否提交表单 -->
</form>
<label name="timelabel" id="timelabel" >早上好!!!</label>
</body>
</html>/*
* servlet实验代码
*/
package WB;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class Webservlet
*/
@WebServlet("/Webservlet")
public class Webservlet extends HttpServlet {
public void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException{
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("gb2312");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out=response.getWriter();
//request.getParameter("name1")+"您好！您的信息我已经收到"
out.println("<!DOCTYPE html>"+
"<html>"+
"<head><meta charset='gb2312'><title>myfristwebproject</title></head>"+
"<body>"+
""+request.getParameter("name1")+"您好！您的信息我已经收到"+
"</body>"+
"</html>");
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
processRequest(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
processRequest(request, response);
}
}注意点：
- 此处用的时servlet3.0，所以没有web.xml的配置文件,直接使用了注解的方法就行配置@WebServlet("/Webservlet")。
- 注意此处也需要把action更改成目标地址，不然会出错，action=""不需要加入"/",系统会自动加入。