jQuery.ajax() で配列をPOST

今更jQueryかよ！というツッコミはなしの方向で。とある事情で必要になったんです。

配列をPOSTする方法について、ちょっとだけハマったのでメモ。

概要

jQuery.ajax()はこんなふうに使います。

jQuery.ajax({
    url: "https://example.com/path/to/endpoint",
    type: "POST",
    data: {a: 1, b: 2, c: 3}
});

詳しくは公式リファレンスをどうぞ。

で、今回やりたかったのは、dataにオブジェクトじゃなくて配列をJSON形式で渡すこと。

これじゃダメ？

単純にdataを配列にするだけではダメでした。

jQuery.ajax({
    url: "https://example.com/path/to/endpoint",
    type: "POST",
    data: [1, 2, 3]
});

これだと、{undefined: [1, 2, 3]}というオブジェクトをPOSTしてしまいます。

多分、URLエンコードでは純粋な配列を使えないからこんなふうに無理矢理オブジェクトにしてるんじゃないかと。

こうしましょう

データタイプを明示的に指定して、シリアライズもjQueryにまかせずに自前でやってしまいましょう。

jQuery.ajax({
    url: "https://example.com/path/to/endpoint",
    type: "POST",
    contentType: "application/json",
    data: JSON.stringify([1, 2, 3])
});

これなら、配列に限らず数値やbooleanのようにJSONで表現できるものをすべて扱えます。