在客户端获取表单数据
本节将给出一个 JSF 表单，其数据通过 JavaScript 和 DOM 在 Web 浏览器中获得。 您可以在自已的 Web 表单应用程序中重用这里介绍的 JavaScript 代码。本节还将解释如何正确地编码表单数据以将它提交给服务器。
构建 JSF 表单
让我们先来看一个典型的 JSF 例子。SupportForm.jsp 这个页面包括一些基本 HTML 的元素，比如输入框、列表、单选按钮、复选框和提交按钮。所有输入组件都将其值绑定到称为 SupportBean 的 JavaBean 属性。这个页面的头部包括一个<script> 标记，用来导入 AutoSaveScript.js 文件（请参阅 下载 部分）。此 JavaScript 文件包括一个函数，名为 setAutoSaving()，它在 <body> 标记的 onload 属性内调用，以便在 Web 浏览器加载页面后激活表单的自动保存功能。 清单 1 显示了 SupportForm.jsp 页的部分源代码。
清单 1. 包含示例 JSF 表单的 SupportForm.jsp 页
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<html>
<head>
<title>Support Form</title>
<script src="AutoSaveScript.js">
</script>
</head>
<body onload="setAutoSaving(10000)">
<f:view>
<h1>Support Form</h1>
<h:form id="supportForm">
<p><h:outputText value="Name: "/>
<h:message for="name"/><br>
<h:inputText id="name" value="#{supportBean.name}"
size="40" required="true">
</h:inputText>
...
<p><h:outputText value="Platform: "/>
<h:message for="platform"/><br>
<h:selectOneRadio id="platform" value="#{supportBean.platform}"
layout="lineDirection" required="true">
<f:selectItem itemValue="Windows" itemLabel="Windows"/>
<f:selectItem itemValue="Linux" itemLabel="Linux"/>
<f:selectItem itemValue="Mac" itemLabel="Mac"/>
</h:selectOneRadio>
...
<p><h:outputText value="Problem: "/>
<h:message for="problem"/><br>
<h:inputTextarea id="problem" value="#{supportBean.problem}"
rows="10" cols="40" required="true"/>
<p><h:commandButton id="submit" value="Submit"
action="#{supportBean.submit}"/>
</h:form>
</f:view>
</body>
</html>
清单 2. SupportForm.jsp 页面生成的 HTML 代码
<head>
<title>Support Form</title>
<script src="AutoSaveScript.js">
</script>
</head>
<body onload="setAutoSaving(10000)">
<h1>Support Form</h1>
<form id="supportForm" method="post"
action="/autosave/faces/SupportForm.jsp"
enctype="application/x-www-form-urlencoded">
<p>Name: <br>
<input id="supportForm:name" type="text"
name="supportForm:name" size="40" />
...
<p>Platform: <br>
<table id="supportForm:platform">
<tr>
<td><label><input type="radio" name="supportForm:platform"
value="Windows"> Windows</input></label></td>
<td><label><input type="radio" name="supportForm:platform"
value="Linux"> Linux</input></label></td>
<td><label><input type="radio" name="supportForm:platform"
value="Mac"> Mac</input></label></td>
</tr>
</table>
...
<p>Problem: <br>
<textarea id="supportForm:problem" name="supportForm:problem"
cols="40" rows="10">
</textarea>
<p><input id="supportForm:submit" type="submit"
name="supportForm:submit" value="Submit" />
<input type="hidden" name="com.sun.faces.VIEW"
value="H4sIAA..." />
<input type="hidden" name="supportForm" value="supportForm" />
</form>
</body>
</html>
在这个 HTML 表单的结尾，有一些隐藏元素。如果 javax.faces.STATE_SAVING_METHOD 参数在 web.xml 文件中被设为 client，那么 JSF 实现会内部使用这些隐藏元素以识别所提交的表单和存储组件树在请求间的状态。从浏览器的角度看，一个 JSF 表单与其他 HTML 表单无异，可以使用 JavaScript 和 DOM 在 Web 浏览器中访问表单元素。
