web-dev-qa-db-ja.com

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スクリプトに送信します。

14
arma

適切な形式の配列を_$.param_に渡していない。 _jQuery.param_ docs から:

渡されるオブジェクトが配列内にある場合は、 .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;
});
_
24
Matt Ball

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

私は別の質問からそれを行うための素晴らしい関数を見つけました 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);
0