在Jquery中序列化一个数组?

时间:2010-11-21 18:24:07

标签: jquery

如何为$.ajax提交准备此数组? 此处图片会返回["val1","val2"],但在我使用$.param(images)后,我会返回undefined=undefined&undefined=undefined

   $('#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脚本。

3 个答案:

答案 0 :(得分:23)

您没有以适当的格式将数组传递给$.param。来自jQuery.param docs

  

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

数组应该是由名称/值对组成的对象数组。您看到undefined=undefined&undefined=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;
});

答案 1 :(得分:7)

请参阅docs for $.param

  

如果传递的对象位于Array中,则它必须是.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() });
});

答案 2 :(得分:0)

我从另一个问题中找到了很好的功能 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);