在 jQuery 中序列化数组

Question

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.

Answer 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;
});

Answer 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() });
});

Answer 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);