借助 Ajax 自动保存 JSF 表单: 第 3 部分：保存 JSF 表单中的用户输入

核心提示： 隐藏的 restoreTrigger 组件和 submitRestoreRequest() JavaScript 函数提供了触发表单恢复的方法，服务器端代码执行其余的任务，借助 Ajax 自动保存 JSF 表单: 第 3 部分：保存 JSF 表单中的用户输入(10)，生成一个包含自动保存数据的恢

隐藏的 restoreTrigger 组件和 submitRestoreRequest() JavaScript 函数提供了触发表单恢复的方法。服务器端代码执行其余的任务，生成一个包含自动保存数据的恢复过的表单。然而，还可以添加一些按钮，以便用户可以控制保存或恢复表单的时机。在真实的应用程序中，如果希望保持用户界面简洁并能够透明、自动地保存和恢复表单，则不需要添加这些按钮。

然而，您可能希望对真实的应用程序扩展自动保存功能，以便您的用户可以像桌面程序保存/加载文档一样保存/加载 Web 表单。在本例中，用户可以恢复 Web 表单、修改一些数据并重新向 Web 服务器提交表单。假设您拥有一个可以提交每月发票的表单。其中一些输入 — 例如发票日期、发票额以及发票行 — 每月都会改变，但是可以重用输入的供应商和购买者信息，从而减少输入表单数据所需的时间。

添加一个 Save 按钮

通过上节的介绍，您已经了解了如何添加 Restore 按钮。表单还可以包含一个 Save 按钮，其代码如 清单 13 所示。Save 按钮不是通过 action 或 actionListener 属性指定服务器端方法，而是在用户单击按钮时使用 onclick 属性调用 submitSaveRequest() JavaScript 函数。

清单 13. 保存表单数据的命令按钮
<h:form　id="supportForm">　
　　...　
　　<h:commandButton　id="saveButton"　value="Save"　
　　　　　　/>　
　　...　
</h:form>　

清单 14 展示了 SupportForm.jsp 页面的 submitSaveRequest() 函数。这个 JavaScript 函数可以借助 AutoSaveScript.js 文件的 submitAllForms() 函数向服务器发送表单数据。本系列的 第 1 部分 提供了 AutoSaveScript.js 文件的代码。然后，submitSaveRequest() 将返回 false，这样 Save 按钮的 onclick 表达式将返回 false，这说明 Web 浏览器不能向服务器提交表单。