在 jQuery 中序列化数组

Question

如何为 $.ajax 提交准备元素数组？

这里的图像返回["val1","val2"]，但是在我使用$.param(images)之后我得到以下结果：

未定义=未定义&未定义=未定义

这是我的代码：

$('#rem_images').click(function() {
    var images = new Array();
    $('.images_set_image input:checked').each(function(i) {
        images[i] = $(this).val();
    });
    alert($.param(images));

    return false;
}

一般来说，想法是检查页面上要删除的图像，然后单击按钮循环检查所有检查的图像并序列化数组以通过 AJAX 提交到 PHP 脚本。

Answer 1

您没有将正确格式的数组传递给 $.param。来自 jQuery.param 文档：

如果传递的对象位于数组中，则它必须是 .serializeArray() 返回格式的对象数组。

该数组应该是由名称/值对组成的对象数组。您会看到 undefined=undefined&undefine=undefined 因为 "val1".name、"val1".value、"val2"。 name 和 "val2".value 均未定义。它应该看起来像这样：

[{name: 'name1', value: 'val1'}, {name: 'name2', value: 'val2'}]

所以你可以像这样构造数组（假设你的复选框有一个 name 属性）：

$('#rem_images').click(function(){
    var images = [];
    $('.images_set_image input:checked').each(function(){
        var $this = $(this);
        images.push({name: $this.attr('name'), value: $this.val()});
    });
    alert($.param(images));
    return false;
});

不过，更巧妙的是使用 .map()（因为函数式编程是好东西）：

$('#rem_images').click(function(){
    var images = $('.images_set_image input:checked').map(function(){
        var $this = $(this);
        return {name: $this.attr('name'), value: $this.val()};
    }).get();
    alert($.param(images));
    return false;
});

Answer 2

请参阅 文档了解 $.param：

如果传递的对象是数组，则它必须是.serializeArray()返回格式的对象数组

[{name:"first",value:"Rick"},
{name:"last",value:"Astley"},
{name:"job",value:"Rock Star"}]

这意味着您需要以相同的方式生成数组：

$('.images_set_image input:checked').each(function(i){
    images.push({ name: i, value: $(this).val() });
});

Answer 3

我从另一个问题中找到了一个很好的函数来做到这一点
https://stackoverflow.com/a/31751351/4110122

此函数返回带有键值对的数组

$.fn.serializeObject = function () {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function () {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }      
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

要使用此函数，只需调用:

var Form_Data = $('form').serializeObject();
console.log(Form_Data);