【转】JavaWeb学习 第4章 Servlet 表单处理

【http://www.cnblogs.com/yinger/archive/2011/09/20/2182676.html】

（上）
这一章主要讲解了如何通过 Servlet 来处理表单数据，其实处理方法不是很难，重点放在了 表单的知识，这部分的知识很重要，web 开发中这个是必不可少的知识！
好吧，边看图片边学习（或者复习）表单知识吧！

1.HTML 表单
注意：表单的请求方式，最重要的两种 get 和 post 
html表单 
表单组件汇总：
表单组件

 
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

输出结果： 成功！
out

测试二：输入 胡家威 090807

in2
 

输出结果： 失败了！ 中文乱码！ 
out_error

 
这个是编码问题，在方法中加上一句：
request.setCharacterEncoding("utf-8"); //设置请求的编码方式是 UTF-8

 
输出结果： 还是错误了！ 不是乱码，但是全是 ？ 怎么回事呢？ 
out_error2

 
百思之后，我想，这个肯定是还有哪里的编码方式设置错了，我想这个就像是 网络协议一个道理，只有两者的协议方式是一样的才能进行通信，不然就会出现错误!
于是，我想是不是我的 HML 的编码方式错了？ 于是乎马上查看了一下，没有错，是 UTF-8 的
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

那是哪里呢？ 我的这个项目就还有一个 Servlet 处理程序，该不会是它吧？
果然，我记得那个老师讲过，在 Servlet 的服务方法中 最好是能够加上 一句
response.setContentType("text/html;charset=utf-8");
表示 输出的HTML 文件是 UTF-8 编码的！
呵呵呵，修改完了之后，测试终于成功了！哈哈哈

out_right 

4.Myeclipse 中的 可视化的开发
自我感觉这个可视化开发还是可以的，但是在我的电脑里 Myeclipse 反应比较慢，用上这个那就更不用说了，呵呵呵，看着这个让我想起了 Visual Studio 2010 ，
呵呵呵，想想微软的技术就是牛逼！虽然不开源，但是做得那么完善，真是不错，同类软件无法和她相比啊
 

Myeclipse_html 
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>”，还有要注意处理的顺序，不能随便写！
 
结果示意图：

in9
 
输出结果： 

out_7
 
（中）

上篇讲到 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 
xml

关于 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 为例，至于各个节点代表的含义自己看那篇日志吧，呵呵呵

<!--校验登陆，简单。复杂的例子请看Demo-->

<validation-config>

<form id="loginform" show-error="alert" onfail="">

<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>

迫不及待了，试试看！

打开 登陆页面

login

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

error

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

encode

可是，在 Myeclipse 中打开却是一堆的乱码，不知道怎么回事？
乱码
算了，不管了，强制试试看，呵呵呵，试了才知道有没有问题嘛
点击 submit ，弹出窗口 ，还是有错的，呜呜呜。。。
right
纠结了好久，重新另存为了多次，还是这样子，这时我想 应该是 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 

contenttypes

Spelling

spelling

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

没乱麻

重新试试看，弹出的窗口变成了这样，没有错误，哈哈哈 
error_right

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

highlight 

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

在html 中

<div id="error" style="color:red;font-weight:bold;"></div>

<form id="loginform" name="loginform" action="/webproject02/servlet/LoginServlet" method="post" accept-charset="utf-8" onsubmit="return doValidate(this)" >

在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>


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


div 


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();
}


ok! 一切准备就绪，启动Tomcat，发布网站，呵呵呵呵，测试一下

处理结果：

in (2)


但是过程中，我还是出现了一些错误的，呵呵呵，例如：

fck_error


也就是 FCKeditor 没有显示出来，原因一般都是 书写时出现了一些 字母输入错误，呵呵呵 ，记住 是 FCKeditor！！！！

【还有一个问题：那就是在 Chrome 浏览器中显示不出来！可能是不兼容的原因吧，应该没有其他的问题，所以这个最好是开发针对 IE 浏览器的项目使用，其他的最好抛弃它】


5. Myeclipse 中的一个使用技巧

我们经常会发现我们有些文件或者文件夹并没有什么问题，但是 Myeclipse 总是在 图标的 左边 打上一个黄色的感叹号！很是烦人啊

解决办法：点击右键，选择 Myeclipse ，然后选择 “ Exclude from Validation” ，可以了 
fangfa

效果：

meicuo

6. 更多参考信息 
more



通过 Wiz 发布 

posted @ 2012-01-10 12:46  swjm119  阅读(315)  评论(0)  编辑  收藏  举报