Serializing an array in jQuery

问题

How to prepare an array of element for $.ajax submit?

Here images return ["val1","val2"], but after I use $.param(images) I get the following:

undefined=undefined&undefined=undefined

Here is my code:

$('#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;
}

Generally the idea is to check the images to delete on the page, then on a button click loop trough all images checked and serialize an array for submit over AJAX to the PHP script.

回答1:

You're not passing an array in proper format to $.param. From the jQuery.param docs:

If the object passed is in an Array, it must be an array of objects in the format returned by .serializeArray().

The array should be an array of objects consisting of name/value pairs. You see undefined=undefined&undefined=undefined because "val1".name, "val1".value, "val2".name, and "val2".value, are all undefined. It should look something like this:

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

So you can construct the array like this (assuming your checkboxes have a name attribute):

$('#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;
});

Even slicker, though, is to use .map() (because functional programming is good stuff):

$('#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;
});

回答2:

See the docs for $.param:

If the object passed is in an Array, it must be an array of objects in the format returned by .serializeArray()

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

That means you need to generate your array in the same way:

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

回答3:

I find a great function to do that from another question https://stackoverflow.com/a/31751351/4110122

This function return array with key value pairs

$.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;
};

To use this just call:

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

来源：https://stackoverflow.com/questions/4239460/serializing-an-array-in-jquery

标签

jquery

form-submit

form-serialize