JavaWeb学习第4章 Servlet 表单处理

（上）

这一章主要讲解了如何通过 Servlet 来处理表单数据，其实处理方法不是很难，重点放在了表单的知识，这部分的知识很重要，web 开发中这个是必不可少的知识！

好吧，边看图片边学习（或者复习）表单知识吧！

1.HTML 表单

注意：表单的请求方式，最重要的两种 get 和 post

表单组件汇总：

2.表单的语法知识

各种组件的标签以及标签中的属性

其中 name 属性很重要，以后用 Servlet 来处理表单数据就是通过这个属性来获取表单组件的数据的

密码是不能显示出来的
name 相同的 radio 就是一组，只有一个能被选中

select 中加上 multiple 就是多选了，可以结合键盘使用来选择

3. 试验

简单的登陆页面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Login HTML</title>
</head>
<body>
<form name="loginform" action="/webproject02/servlet/LoginServlet" method="post" accept-charset="utf-8">
<table width="300" border="0">
<tr>
<td colspan="2">请输入用户名和密码：
</td>
</tr>
<tr>
<td>用户名：
</td>
<td><input type="text" name="username" size="20" maxlength="18">
</td>
</tr>
<tr>
<td>密码：
</td>
<td><input type="password" name="password" size="21" maxlength="18">
</td>
</tr>
<tr>
<td><input type="submit" name="submit" value="submit">
</td>
<td><input type="reset" name="reset" value="reset">
</td>
</tr>
</table>
</form>
</body>
</html>

LoginServlet 处理程序：主要部分 dePost 方法

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">");
out.println("<HTML>");
out.println(" <HEAD><TITLE>A Servlet</TITLE></HEAD>");
out.println(" <BODY>");
out.print("username:"+request.getParameter("username")+"<br>");
out.print("password:"+request.getParameter("password")+"<br>");
out.println(" </BODY>");
out.println("</HTML>");
out.flush();
out.close();
}

测试一：输入 yinger 090807

输出结果：成功！

测试二：输入胡家威 090807

输出结果：失败了！中文乱码！
JavaWeb学习第4章 Servlet 表单处理

这个是编码问题，在方法中加上一句：

request.setCharacterEncoding("utf-8"); //设置请求的编码方式是 UTF-8

输出结果：还是错误了！不是乱码，但是全是？怎么回事呢？
JavaWeb学习第4章 Servlet 表单处理

百思之后，我想，这个肯定是还有哪里的编码方式设置错了，我想这个就像是网络协议一个道理，只有两者的协议方式是一样的才能进行通信，不然就会出现错误!

于是，我想是不是我的 HML 的编码方式错了？于是乎马上查看了一下，没有错，是 UTF-8 的

那是哪里呢？我的这个项目就还有一个 Servlet 处理程序，该不会是它吧？

果然，我记得那个老师讲过，在 Servlet 的服务方法中最好是能够加上一句

response.setContentType("text/html;charset=utf-8");

表示输出的HTML 文件是 UTF-8 编码的！

呵呵呵，修改完了之后，测试终于成功了！哈哈哈

4.Myeclipse 中的可视化的开发

自我感觉这个可视化开发还是可以的，但是在我的电脑里 Myeclipse 反应比较慢，用上这个那就更不用说了，呵呵呵，看着这个让我想起了 Visual Studio 2010 ，

呵呵呵，想想微软的技术就是牛逼！虽然不开源，但是做得那么完善，真是不错，同类软件无法和她相比啊

5. 用 Servlet 处理更多的数据

survey.html 内容

<html>
<head>
<title>潜在用户网络调查</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<h1>潜在用户网络调查</h1>
<br>
<form method="post" action="/webproject02/servlet/SurveyServlet">
<table border="0">
<tr>
<td align="right">姓名：</td>
<td colspan="2" align="left"><input type="text" name="name" size="40"></td>
</tr>
<tr>
<td align="right">EMAIL：</td>
<td colspan="2" align="left"><input type="text" name="email" size="40"></td>
</tr>
<tr>
<td align="right">年纪：</td>
<td align="left">
<input type="radio" name="age" value="18">小于18
<input type="radio" name="age" value="18-25">18 - 25
<input type="radio" name="age" value="26-40">26-40
<input type="radio" name="age" value=">40">大于 40
</td>
</tr>
<tr>
<td align="right">编程时间：</td>
<td align="left">
<select name="codetime" size=1>
<option value="never">不编程</option>
<option value="6"> 小于6个月</option>
<option value="6-12"> 6 - 12 月</option>
<option value="12-24">1 - 2年</option>
<option value=">24">2年以上</option>
</select>
</td>
</tr>
<tr>
<td align="right">使用的操作系统</td>
<td align="left">
<select name="os" size="6" multiple>
<option value="WinXP">Win XP</option>
<option value="Win2000/2003">Win 2000/2003</option>
<option value="Linux">Linux</option>
<option value="FreeBSD">FreeBSD</option>
<option value="MacOS">Mac OS</option>
<option value="other">other</option>
</select>
</td>
</tr>
<tr>
<td>使用的编程语言</td>
<td><input type="checkbox" name="language" value="C">C
<input type="checkbox" name="language" value="C++">C++
<input type="checkbox" name="language" value="C#">C#
<input type="checkbox" name="language" value="Python">Python
<input type="checkbox" name="language" value="Java">Java
<input type="checkbox" name="language" value="VB">VB
<input type="checkbox" name="language" value="Dephi">Dephi
</td>
</tr>
<tr>
<td align="right">建议：</td>
<td colspan="2" align="left">
<textarea name="comment" cols="40" rows="4"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="reset" value="reset">
<input type="submit" value="submit">
</td>
</tr>
</table>
</form>
</body>
</html>

处理程序 SurveyServlet.java

private static final long serialVersionUID = 2382748484906030267L
void dopublic Get(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
request.setCharacterEncoding("utf-8");
out.println("<html>");
out.println("<head><title>display survey infomation</title></head>");
out.println("<body>");
out.println("<h2>用户输入信息：</h2>");
out.println("<strong>用户名：" + filter(request.getParameter("name"))
+ "</strong><br>");
out.println("<strong>email：" + filter(request.getParameter("email"))
+ "</strong><br>");
out.println("<strong>年纪：" + request.getParameter("age")
+ "</strong><br>");
out.println("<strong>编程时间：" + request.getParameter("codetime") // 得到某个组件得值
+ "</strong><br>");
out.println("<strong>使用的操作系统：</strong>");
printValues(out, request.getParameterValues("os")); // 得到某个表单组件的所有值，很多个值
out.println("<strong>使用的编程语言：</strong>");
printValues(out, request.getParameterValues("language"));
out.println("<strong>建议：" + filter(request.getParameter("comment"))
+ "</strong><br>");
out.println("</body>");
out.println("</html>");

out.flush();
out.close();
}

/**
* 输出字符串数组中所有的元素
*/
public void printValues(PrintWriter out, String[] values) {
if (values == null || values.length == 0) {
return;
}
out.println("<ul>");
for (int i = 0; i < values.length; i++) {
out.println("<li>" + values[i] + "</li>");
}
out.println("</ul>");
}

/**
* 过滤<, >,\n 字符的方法
* @param input 需要过滤的字符
* @return 完成过滤以后的字符串
*/
public String filter(String input) {
if (input == null) {
return null;
}
if (input.length() == 0) {
return input;
}
input = input.replaceAll("&", "&");
input = input.replaceAll("<", "<");
input = input.replaceAll(">", ">");
input = input.replaceAll(" ", " ");
input = input.replaceAll("'", "'");
input = input.replaceAll("\"", """);
return input.replaceAll("\n", "<br>");
}

注意：这里添加了两个方法，都是很有用的

由于有时候我们并不知道参数的值有多少个，所以，我们可以用第一个方法将所有的值都输出，而不用每个都去那么麻烦的写

但是，有时候提交表单的人是个坏蛋，他故意输入一些脚本或者什么其他的恶意信息，会导致网站出现事故，为了避免他的脚本生效，我们要进行字符转换，同时要将 java 中的 “\n” 换成 html 中的 “ <br>”，还有要注意处理的顺序，不能随便写！

结果示意图：

输出结果：

（中）

上篇讲到 Servlet 处理表单的一些知识，今天在这里继续这个话题，我们使用更多的其他的方法去获取和处理表单的数据，以方便以后在项目中遇到的各种问题，哈哈哈

SurveyServlet 的改进

很多时候，我们可能并不知道表单中的每一个组件的名字，所以，我们可以使用 request.getParameterNames 方法来获取

源码：

Enumeration e = request.getParameterNames();
String parameterName = null;
while(e.hasMoreElements()){
parameterName = (String) e.nextElement();
String[] values = request.getParameterValues(parameterName); 
out.println("<ul><br>");
for(int i=0;i<values.length;i++){
out.println("<li>"+values[i]+"</li><br>");
}
out.println("</ul><br>");
}

因为大多数的内容和 SurveyServlet 差不多，所以我在Myeclipse 中直接复制粘贴了一份 SurveyServlet.java 取名为 SurveyServlet2

然后把 survey.htm 中的 action也相应的改为 action="/webproject02/servlet/SurveyServlet2"，然后测试吧！

（下）

1.JSValidation 验证框架

下载地址：http://download.csdn.net/source/904291 CSDN
JavaWeb学习第4章 Servlet 表单处理

关于 JSValidation验证框架的介绍和用户手册请见我的另一篇日志：http://user.qzone.qq.com/1158112684/blog/1302069480

2.使用方法以及错误处理

将下载下来的两个文件 validation-framework.js 和 validation-config.xml 文件复制到 Web Project 的 WebRoot 目录下，然后修改

validation-config.js 文件

找到 var ValidationRoot = ""; 将其设置成该 js文件的路径例如：var ValidationRoot = "/webproject02/js/";

然后配置 validation-config.xml 文件

配置方法详情请见我的那篇日志：http://user.qzone.qq.com/1158112684/blog/1302069480

这里我使用那篇日志中的 demo 为例，至于各个节点代表的含义自己看那篇日志吧，呵呵呵

<validation-config>

<form >

</field>

</field>

</form>

</validation-config>

迫不及待了，试试看！

打开登陆页面

JavaWeb学习第4章 Servlet 表单处理

不填入任何信息，点击 submit。啊！又错了！！！！一堆乱码，不知道错在哪里！

JavaWeb学习第4章 Servlet 表单处理

视频解释说要将 js 文件设置为 UTF-8 的编码格式才行，呵呵呵，有道理！用 EditPlus 打开，然后另存为，注意选择编码方式为 UTF-8

JavaWeb学习第4章 Servlet 表单处理

可是，在 Myeclipse 中打开却是一堆的乱码，不知道怎么回事？

算了，不管了，强制试试看，呵呵呵，试了才知道有没有问题嘛

点击 submit ，弹出窗口，还是有错的，呜呜呜。。。

纠结了好久，重新另存为了多次，还是这样子，这时我想应该是 Myeclipse 的问题，百度

感谢这位朋友的一篇博客让我醒悟，哈哈哈地址：http://blog.163.com/baoqingcd@126/blog/static/830164062010736129646/

MyEclipse打开utf-8的js文件乱码

在js文件中包含中文的时侯，用myeclipse打开发现是乱码，之前是用utf-8编码保存的，myeclipse默认的字符编码是iso的，所以会出现乱码，将编码格式更改即可解决乱码。

菜单window－preferences－general－content types，右边text下找到javascript一项把默认的字符集设置为对应的格式，这里设置为UTF-8，再打开js文件，中文已经正确显示了。

同时也可把window－preferences－general－editors－text editors－spelling右面项的encoding改为UTF-8，默认为GBK。

根据这位前辈的提示，我按要求重新设置了一下 Myeclipse ，哈哈哈

Content Types

JavaWeb学习第4章 Servlet 表单处理

Spelling

JavaWeb学习第4章 Servlet 表单处理

果然，乱码消失了！！！！

JavaWeb学习第4章 Servlet 表单处理

重新试试看，弹出的窗口变成了这样，没有错误，哈哈哈
JavaWeb学习第4章 Servlet 表单处理

另外，输入文本框也是高亮显示，呵呵呵，太方便了，呵呵呵！

JavaWeb学习第4章 Servlet 表单处理

3. 改变错误提示方式：改为显示在页面中，加上一个 div

在html 中

<form >

在xml 中

<validation-config>
<form id="loginform" show-error="error" onfail=""> // form 的 id 对应于 HTML 页面中的 form 的 id，show-error 表示错误的显示方式
<field name="username" display-name="用户名" onfail="">
<depend name="required" />
<depend name="commonChar" />
</field>
<field name="password" display-name="密码" onfail="">
<depend name="required" />
</field>
</form>
</validation-config>

显示效果：呵呵呵，还不错嘛

JavaWeb学习第4章 Servlet 表单处理

4.FCKeditor：用 Javascript 写的网页上的编辑器

下载地址：http://ckeditor.com/download

它实际上是用 JavaScript 写的，只要浏览器支持就可以了，和编程语言无关

使用方法：（我的测试方案）

① 将下载下来的 Zip 文件解压到 Web Project 中，放置在一个文件夹中，例如：fckeditor，然后刷新该 Project

② 新建一个 HTML 文件，fckeditor.html ，添加 js 文件的引用，然后建立一个表单，并在表单中添加那个 FCKeditor

HTML源码：

<html>
<head>
<title>fckeditor.html</title>
<script type="text/javascript" src="/fckeditor/fckeditor/fckeditor.js"></script> // 引用它
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
请输入内容：<br>
<form name="content" id="form" action="/fckeditor/servlet/addContent" method="post"> // method 是 post ，因为处理内容比较多
标题：<input type="text" name="title" size="80"/><br> // name 属性是用于后面获取它的内容
内容：<br>
<script type="text/javascript">
var editor = new FCKeditor('editor1'); // 这个 editor1 很重要，后面要获取其中的内容就是用它！
editor.BasePath = '/fckeditor/fckeditor/'; // 这个也很重要，设置那个 js 文件在这个项目的位置
editor.Height = 200; // 设置长和宽
editor.Width = 800;
editor.ToolbarSet = 'Default'; // 设置工具栏的样式，这里是默认的情况
editor.Create(); // 创建 editor
</script>
<input name="submit" type="submit" value="submit">
</form>
</body>
</html>

③新建一个处理表单的 Servlet 程序：

源码：只列出它的一个方法 doPost

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
out.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">");
out.println("<HTML>");
out.println(" <HEAD><TITLE>A Servlet</TITLE></HEAD>");
out.println(" <BODY>");
out.println("标题是："+request.getParameter("title")+"<br>");
out.println("内容是："+request.getParameter("editor1")+"<br>");
out.println(" </BODY>");
out.println("</HTML>");
out.flush();
out.close();
}