jQuery提交带有多个数组的ajax答案

【问题标题】：jQuery submit ajax with multiple arraysjQuery提交带有多个数组的ajax
【发布时间】：2012-12-25 08:31:37
【问题描述】：

您好，我正在尝试使用 Validate 的 submitHandler 中的 ajax 提交表单，同时还使用了美化多个选择的 Chosen 库。以下作品：

submitHandler: function(form) {
    var     form = $(this.currentForm);

    var     data = {
        first_name    : form.find('#first_name').attr('value'),
        last_name     : form.find('#last_name').attr('value'),
        chosen_people : form.find('#chosen_people').val(),
    };

    $.ajax({
        type : "POST",
        url : "formhandler.php",
        data : data,
        success : function(response) {
            console.log(response);
        }
    });
}

服务器响应：

array(
    ['first_name'] => 'John'
    ['last_name'] => 'Smith'
    ['chosen_people'] => array(
        [0] => 37
        [1] => 42
    )
)

问题是我的表单很大并且经常更改，我不想继续枚举所有输入和选择元素。我只想说：

var     inputs = form.find('input').serializeArray();
var     selects = form.find('.chzn-select').val();
var     data = $.merge(inputs, selects );

...

我已经尝试过各种手动输入的组合，例如：

for(var select in selects)
    selects[select] = {'name' : select, 'value' : selects[select]};

var     serializedSelects = {'name' : 'chosen_people', 'value' : selects };
var     data = $.merge(inputs, serializedSelects);

但我无法让数组正确嵌套，以便服务器在其 post 变量中具有正确的数组结构。

问题的要点是，尽管 jQuery 为元素提供了 $.serializeArray()，但它没有提供类似 $.paramArray() 的东西来获取关联数组并将其转换为序列化数组。它只能输出序列化的字符串，很难进一步操作。我不想包含另一个 ajax 框架，所以希望有一个简单的解决方案。

附：我正在使用 php5 和 jQuery 1.8.3。这是我到目前为止发现的，也许我只是在尝试添加它之前弄乱了选择数组的格式：

jQuery post() with serialize and extra data

How to serialize a JavaScript associative array?

Jquery.SerializeArray how to add more parameters to it?

谢谢！

【问题讨论】：

你为什么不直接做form.serializeArray()？
您是要获取表单中所有元素的值，还是仅获取一些？

标签： jquery ajax nested associative-array serializearray

【解决方案1】：

你需要序列化你的主表单本身：

$('form').submit(function() {
  var data = $(this).serialize();
  e.preventDefault();
$.ajax({
    type : "POST",
    url : "formhandler.php",
    data : data,
    success : function(response) {
        console.log(response);
    }
});
});

【讨论】：

您好，感谢您的快速回复。不幸的是，它不起作用，这是输出： array( ['first_name'] => 'John' ['last_name'] => 'Smith' ['chosen_people'] => 4 ) 出于某种原因，它没有' t 递归地序列化 Chosen 多选。
将您的答案与此答案结合起来对我有用stackoverflow.com/a/1186309/539149，我认为 jQuery 人员需要考虑更新他们过时的序列化函数以处理现实世界中的对象混合、关联数组、数值数组、如果他们能找到一种优雅的识别方式，甚至可能是序列化数组。
是的，你是对的。但我不知道你有多重选择:)

【解决方案2】：

我不确定为什么这对我来说如此痛苦，但我终于找到了如何为 ajax 格式化数组。数组被 urlencoded 的方式让我震惊。我不确定深度嵌套是否真的得到普遍支持。以下是 ajax 可以采用的各种版本的数组数据：

var     associativeData = {'first_name' : 'John', 'last_name' : 'Smith', 'chosen_people' : Array('37', '42')};
var     nameValueData = Array(
    {'name' : 'first_name', 'value' : 'John'},
    {'name' : 'last_name', 'value' : 'Smith'},
    {'name' : 'chosen_people[0]', 'value' : 37},
    {'name' : 'chosen_people[1]', 'value' : 42}
);
var     serializedData = "first_name=John&last_name=Smith&chosen_people[]=37&chosen_people[]=42"

这就是我添加自己的数组的方法。 if(values) 行是可选的，但没有它，else 情况永远不会触发，因此如果未选择任何内容，您根本不会在服务器上获得 selected_people 变量：

var     data = form.find('input').serializeArray();
var     values = form.find('#chosen_people').val();
if(values)
for(var value in values)
    data.push({'name' : 'chosen_people[' + value + ']', 'value' : values[value]});
else
    data.push({'name' : 'chosen_people[]', 'value' : ''});

只是发布这个答案，希望它对某人有所帮助。

【讨论】：