Question

我有一个表单，它将来自所有输入的数据作为多维数组收集，并使用标准表单提交功能，这将加载目标页面，PHP脚本完美地读取多维数组并导致期望的输出。

<form action="target.php" method="post">

<?php foreach ($days as $day) { ?>

    <select name="roster[<?php echo $day->date() ?>][1]"> ... </select>
    <select name="roster[<?php echo $day->date() ?>][2]"> ... </select>
    <select name="roster[<?php echo $day->date() ?>][3]"> ... </select>

<?php } ?>

<input type="submit">
</form>

在目标PHP文件中，我只是在$_REQUEST['roster']上选择它，然后我可以将它作为普通的PHP数组使用它。很简单。

但是，我想使用jQuery将其转换为AJAX请求。我已经阅读了一些建议，说使用$('form').serialize()或$('form').serializeArray()来获取表单数据，但这不能正确读取数组，并产生一些奇怪的输出。

我目前正在玩其他建议，其中主要涉及遍历DOM并从元素数据构建新的javascript数组或对象，然后通过$.ajax()发送，但这一切似乎都是不必要的复杂。

我的问题是：是否有一种通过jQuery和$.ajax()发送此表单数组数据的简单方法？

很可能会出现明显的出血，但此刻我无法看到它！

编辑：

以下是标准表单提交功能的print_r $_REQUEST['roster']输出：（为了便于阅读，可以使用<pre>格式化）：

Array
(
[2013-04-06] => Array
    (
        [1] => 8
        [2] => 3
        [3] => 7
    )

[2013-04-13] => Array
    (
        [1] => 4
        [2] => 3
        [3] => 7
    )

[2013-04-20] => Array
    (
        [1] => 8
        [2] => 17
        [3] => 7
    )

[2013-04-27] => Array
    (
        [1] => 4
        [2] => 3
        [3] => 7
    )

)

这是$('form').serialize()的输出：

roster%5B2013-04-06%5D%5B1%5D=8&roster%5B2013-04-06%5D%5B2%5D=3&roster%5B2013-04-06%5D%5B3%5D=7&roster%5B2013-04-13%5D%5B1%5D=0&roster%5B2013-04-13%5D%5B2%5D=0&roster%5B2013-04-13%5D%5B3%5D=0&roster%5B2013-04-20%5D%5B1%5D=0&roster%5B2013-04-20%5D%5B2%5D=0&roster%5B2013-04-20%5D%5B3%5D=0&roster%5B2013-04-27%5D%5B1%5D=0&roster%5B2013-04-27%5D%5B2%5D=0&roster%5B2013-04-27%5D%5B3%5D=0

$('form').serializeArray()的输出：

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

如果我然后使用

从每个[object Object]中提取数据

$.each(data, function(index1, value1) {
    $.each(value1, function(index2, value2) {
        $('body').append('index1: '+index1+' value1: '+value1+' { index2: '+index2+' value2: '+value2+' }');
    });
});

我明白了：

index1: 0 value1: [object Object] { index2: name  value2: roster[2013-04-06][1] }
index1: 0 value1: [object Object] { index2: value value2: 8 }
index1: 1 value1: [object Object] { index2: name  value2: roster[2013-04-06][2] }
index1: 1 value1: [object Object] { index2: value value2: 3 }

......等......每个输入。

显然，从$.each输出，我应该能够以object.name和object.value的形式访问数据，然后将所有内容格式化为一个新的数组，以使其与我的PHP脚本一起使用，但这是这样做的方法？还是有更好的方法？

Answer 1

The .serialize() method creates a text string in standard URL-encoded notation.

这意味着它会将[和]替换为%5B和%5D。由于它是一个文本字符串，因此一种方法是将它们替换回来。

实施例

var ser = $('#id').serialize();

ser = ser.replace(/%5B/g,"[");
ser = ser.replace(/%5D/g,"]");

JS Fiddle

Answer 2

更简单的方法是使用jQuerys $ .param（）函数。 http://api.jquery.com/jquery.param/

jQuery POST多维表单数组

2 个答案: