javascript - 仅序列化更改的表单元素时如何处理空数组

Question

我有一个包含多个多选字段的表单。每个选择都有一个唯一的 ID，并相应地命名:

values[foobar1][]
values[foobar2][]
values[foobar3][]
... etc.

该表单可能包含数百个这样的字段，因此通过 ajax 进行分页。这样做的结果是不能保证所有记录都会在前端立即可用。因此，我不可能提交完整的表格。不过，我确实可以访问服务器端的整个记录​​列表。

我的解决方案是监视表单字段中的更改，并且对于每个更改的字段，将值存储在数组中以仅跟踪更改的字段值。因此，如果您仅对 foobar2 进行更改，则发送到服务器的序列化数组将如下所示:

0: Object {
    name: "values[foobar2][]"
    value: "thevalue1"
},
1: Object {
    name: "values[foobar2][]"
    value: "thevalue3"
}

所以这工作得很好，除了你可能已经猜到的，当选择多个被清空时。无论我使用什么格式来存储更改后的值，无论是每个字段的数组序列化还是作为关联数组，当我将数组传递给 $.param() 以进行 ajax 请求时，生成的序列化字符串不包含任何空值的痕迹。所以服务器无法判断该值已被清空。

任何人都可以建议一种将数据传递到服务器以使 empt(ied) 数组保持完整的方法，或者另一种处理初始问题的方法。

提前致谢!

Answer 1

您想要计算当前状态与先前状态之间的差异，将更改发送到服务器，并将其应用到数据。

您可以使用 JSON patch 来执行此操作标准(rfc6902)。

JSON Patch is a format for describing changes to a JSON document. It can be used to avoid sending a whole document when only a part has changed. When used in combination with the HTTP PATCH method it allows partial updates for HTTP APIs in a standards compliant way.

要创建差异，您可以使用 NPM 模块，例如 jiff 。 diff 是一组修补命令，可以转换 JSON 文档。例如:

[
  { "op": "replace", "path": "/values/foobar2/", "value": ["thevalue1"] },
  { "op": "remove", "path": "/values/foobar2/"}
]

您将差异发送到服务器，然后使用服务器模块，例如 php-jsonpatch ，将补丁应用到服务器上的当前数据。