将其他数组推送到要通过 AJAX 发送的序列化表单数据答案

【问题标题】：push additional arrays to serialized form data to be sent via AJAX将其他数组推送到要通过 AJAX 发送的序列化表单数据
【发布时间】：2019-01-31 20:05:30
【问题描述】：

我有一个使用 AJAX 提交的表单。为了从表单获取数据到 PHP 脚本，我正在序列化数据。除了该数据之外，我还想包含另一个来自表单外部的动态数据的数组。这是我所拥有的一个示例：

$(function() {
  var $form = $('form'),
      formData = $form.serializeArray(),
      arr = ["Saab", "Volvo", "BMW"]; /* Just an example array */
  
  formData.push({name: 'dynamic-array', arr});
  
  console.log(formData);
  
  /*
  $.ajax({
    type: 'POST',
    url: 'http://example.com',
    data: formData
  }).done(function() {
    console.log('Submitted');
  });
  */
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input name="name" type="text" value="Lorem" />
  <input name="number" type="text" value="Ipsum" />
</form>

因此，当我在将数组推送到序列化表单数据后控制台日志formData 时，它会正确显示该附加数组。但是，当我尝试在我的 PHP 表单中 print_r($_POST) 时，无法访问附加数组：

Array ( [name] => Lorem [number] => Ipsum [dynamic-array] => )

dynamic-array 没有与之关联的数组。

这样做的正确方法是什么？

【问题讨论】：

标签： php arrays serialization

【解决方案1】：

从serializeArray 返回的序列化数组的格式是一个对象数组，该数组具有一个名为key 的属性，用于保存键名，以及一个名为value 的属性，用于保存值。您的新对象没有value 键，因此它没有在后端得到正确处理。请改用{name: 'dynamic-array', value: arr}。

【讨论】：

好的，现在数据正在通过我的print_r($_POST)，但似乎数据已从数组转换为逗号分隔的字符串。有没有办法在保持数组结构的同时将附加数组推送到序列化的表单数据？在 PHP 脚本中，我希望能够在 dynamic-array 键上执行 foreach
表单编码不处理这样的原始数组；它总是将它们视为一个字符串。如果你想将一个数组 raw 传递给 PHP 后端，你有两个选择： (1) 不要使用表单编码；相反，将整个序列化数据数组作为 JSON 字符串发送，并在 ajax 调用中使用 application/json contentType。然后服务器可以解码 JSON 对象并返回所有正确的类型。或者 (2) 将子数组本身序列化为 {name, value} 对象，就像它的其余部分一样，并为它们使用数组格式的名称（如 dynamicArray[]）——PHP 将自动解析这种名称
那么在 AJAX 调用中通过表单数据以及附加数组发送的最佳方式是什么。抱歉，我并没有真正关注您的最新评论。
如我所说，可以将AJAX调用中的contentType选项设置为application/json，然后将数据作为JSON字符串传递（即JSON.stringify(formData)），然后在后端您可以使用 PHP 函数 json_decode 来获取原始 formData 数组。或者您可以坚持使用表单编码并使用数组语法名称序列化动态数组；像这样而不是推送对象：formData.concat(arr.map(value => {name: 'dynamicArray[]', value: value })) 然后你的 PHP 将在一个名为 $_POST['dynamicArray'] 的数组中获取这些值
是的，这就是我在一个小小的注释中编写代码所得到的：D 由于对象文字和代码块的语法都用大括号分隔，我发布的行是模棱两可的。只需要一些括号来消除歧义。试试这个版本：formData.concat(arr.map(value => ({name: 'dynamicArray[]', value: value })))