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

所以这个工作正常，除了你可能已经猜到的，清除选择倍数时。无论我使用什么格式存储更改的值，无论是每个字段的arraySerialization还是作为关联数组，当我将数组传递给$ .param（）以获取ajax请求时，生成的序列化字符串不包含空值的跟踪。因此，服务器无法确定该值已被清空。

任何人都可以提出一种方法，即将数据传递给服务器，以便empt（ied）数组保持不变，或者处理初始问题的另一种方式。

提前致谢！

Answer 1

为您可以使用localStorage或sessionStorage存储的所有选择字段值创建单个对象。由于表单包含很多页面，因此您使用ajax来获取每个选择字段。将每个字段的选定值放在一个数组中。创建像这样的对象就是这个想法。

{ 
formValues: {
          foobar1: {
                   values: ["thevalue1","thevalue2"]
                   },
          foobar2: {
                   values: ["thevalue3"]
                   },
        ...
          foobarN: {
                   values: []
                   }           
             }
}

每次更新选择的vield值时，请确保更新localStorage已保存的值。例如

var valuesObject = { 
              formValues: {
                          foobar1: {
                                   values: ["thevalue1","thevalue2"]
                                   },
                          foobar2: {
                                   values: ["thevalue3"]
                                   },
                          foobar3: {
                                   values: []
                                   }           
                          }
                     }

// Put the object into storage
localStorage.setItem('valuesObject', JSON.stringify(valuesObject));

// Retrieve the object from storage
var valuesObjectA = localStorage.getItem('valuesObject');
//console.log('valuesObject: ', JSON.parse(valuesObjectA));
// post your data
$.post( "ajax.php", valuesObjectA ).done(function( data ) {
alert( "Data Loaded: " + data );
}).fail(function() {
console.log( "error" );
});

示例fiddle

Answer 2

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

您可以使用JSON patch标准（rfc6902）。

JSON Patch是一种用于描述JSON文档更改的格式。它可以用来避免只有一个部分发送整个文档改变。当它与HTTP PATCH方法结合使用时，它允许以符合标准的方式对HTTP API进行部分更新。

要创建差异，您可以使用NPM模块，例如jiff。 diff设置了一个修补命令，可以转换JSON文档。例如：

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

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

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

2 个答案: