与 $_POST 格式相同的 Ajax 多维表单数据答案

【问题标题】：Ajax multidimensional form data in same format as $_POST与 $_POST 格式相同的 Ajax 多维表单数据
【发布时间】：2013-02-27 19:02:42
【问题描述】：

我有一个具有深度多维输入的表单，如下所示：

<form id="theForm">
 <input type='text' name='one[two][three][]' />
 <input type='text' name='one[two][three][]' />
 <input type='text' name='four[five][six][seven]' />
 <input type='text' name='eight[nine][ten]' />
</form>

我正在尝试通过 AJAX 以与正常提交表单相同的格式发送值。我的意思是，如果我要点击提交按钮，在 PHP 中，$_POST 看起来像这样。这就是我想要的：

array( 'one' => array( 'two' => array('three'=>array( [0] => "", [1] => "" ) ) ),
       'four' => array( 'five' => array ('six' => array( 'seven' => "" ) ) ),
       'eight' => array( 'nine' => array( 'ten' => "" ) ) )
     )

我实际上是在尝试对表单提交进行 AJAX。当我这样做时

$("#theForm").serializeArray()

通过 $.post() 我的 $_POST 发送的邮件如下所示：

array( [0] => array( "name" => string "one[two][three][]",  value=>"")
       [1] => array( "name" => string "one[two][three][]",  value=>"")
       [2] => array( "name" => string "four[five][six][seven]",  value=>"")
       [3] => array( "name" => string "eight[nine][ten]",  value=>"")
     )

这对我没有用。我需要保留我之前概述的多维结构。我想我可以遍历数组并切碎字符串以重新创建我需要的东西，但这对我来说似乎很愚蠢。是一种 jQuery 友好的方式来实现这一点吗？

我已经阅读了关于 jQuery 如何很好地发送多维数组的其他帖子，所以也许我需要问的问题是，我如何提取表单数据并将其保存在多维数组中？

【问题讨论】：

Check out this answer。这会将表单转换为 JS 对象，通过将元素正确转换为对象和数组，可以保留表单数组的键值结构。
你能显示你通过 AJAX 发送数据的代码吗？

标签： php javascript ajax forms multidimensional-array

【解决方案1】：

我的猜测是当您进行 AJAX 调用时：

data: {data: $("#theForm").serializeArray()}

不要这样做，只需将data 设置为serializeArray 的值即可。

data: $("#theForm").serializeArray()

编辑：你说你正在使用$.post，我假设你正在这样做：

$.post('/your/url', {data: $("#theForm").serializeArray()}, function(){});

为了让它工作，你需要这样做：

$.post('/your/url', $("#theForm").serializeArray(), function(){});

【讨论】：

这不是我正在做的，也不是问题所在。问题是 serializeArray 没有根据各种数组级别来构造数据。它是“flat”，“name”属性设置为“whatever[the][name][was]”。似乎做我想做的唯一方法就是自己做。
@parker.sikand：这正是你在做什么，虽然我怀疑你使用的是$.post而不是$.ajax。 serializeArray 返回带有 name 和 value 键的对象数组。当传递给$.param（由 jQuery 自动完成）时，它会转换为您期望格式的查询字符串。如果你发送{data: $("#theForm").serializeArray()}之类的数据，则发送不正确。
@parker.sikand: 没关系，别自责:)
对于未来的谷歌人：我和@parker.sikand 有同样的思考过程，是的，答案是正确的。 :) 谢谢！

【解决方案2】：

接受的答案是完全正确的。附带说明，如果您需要将其他数据添加到帖子数据数组中，您只需将其以{name: "", value: ""} 格式推送到数组中

在我的例子中，除了表单中所有输入的值之外，我还想根据用户单击的按钮添加一个值。所以你所要做的就是：

var data = $("#myForm").serializeArray();
data.push({name: "btnVal", value="button_a"});

并确保您发布的内容如下：

$.post("/some/url", data, function(){});

【讨论】：