将表单数据以 JSON 格式保存到本地计算机 - 基于 DOJO 的 UI

Question

我们有一个基于 Liferay 的门户应用程序。在其中一个 portlet 中，我们使用 DOJO 组件开发了 UI。 我想获得一些关于实现以下功能的建议。

1. 保存到本地 此功能帮助用户将表单数据保存到本地计算机。 这部分如何实现呢？ 这是我正在考虑的方法。

   • 表单数据可以保存为 JSON。
   • 将 onchange 事件附加到所有 UI 组件，并构造一个包含 ui 组件 ID 和值的 JSON 对象。
   • 当用户单击“保存到本地”时，使用 DOJO 库的 toJSON 方法序列化整个 JSON 结构。 但我在这里有几个问题。 Q1.如何打开保存对话框，以便用户可以选择目录路径并指定文件名。此流程中没有发生服务器交互。保存对话框的调用可以从客户端（即从 java 脚本）发生。 Q2。是否可以将表单数据保存到本地计算机而无需任何服务器交互？ IE。为了将数据保存到本地，如果我通过AJAX将表单数据发送到服务器，然后接收作为JSON超链接的响应，那么可以吗？

2. 从本地加载。 单击此按钮时，保存的 JSON 数据将加载到 UI 并且必须设置表单值？ Q1.如何打开文件对话框来选择 JSON 文件并解析数据？我认为 fromJSON 可以用于解析 JSON 字符串并构造 JSON 对象。 但是我可以从本地文件读取吗？

Answer 1

我认为保存到本地场景需要服务器交互。当用户单击保存按钮时，将通过迭代所有小部件或使用 dojo.formToJson 来检索表单数据。然后将序列化的 JSON 字符串发布到服务器，服务器返回带有适当 HTTP 标头的 URL 供浏览器下载。

对于从本地加载场景，您可以在页面中添加文件输入以允许用户上传 JSON 文件。文件上传成功后，客户端可以向服务器发送请求，使用 XMLHTTPRequest 检索 JSON 数据，然后使用该数据设置控件的值。