ただのSEの備忘録

技術からニュース、くだらない雑学まで何でもまとめるブログ

*

jQueryでformのパラメータをmap(オブジェクト)で取得する方法|serializearray

   


ajax通信のdataにマップ形式で渡せるとパラメータ指定が便利ですね。フォーム送信を非同期で行いたい場合、form内のinput要素を一括でmapで取得できると便利ですが、地味に迷ったため、備忘録として残しておきます。

やりたいこと

<form id="testform">
  <inpu type="hidden" name="hoge1" value="1">
  <inpu type="hidden" name="hoge2" value="2">
  <inpu type="hidden" name="hoge3" value="3">
</form>

これを

var param = {
  hoge1:1,
  hoge2:2,
  hoge3:3
}

なんて感じで一発で取りたいわけです。

そこで使用するのが、「serializearray()」です。
これを使うことにより、上記formタグ内の要素をmap形式で取得することが出来ます。

スポンサードリンク

使い方としてはこのようになります。

var param = $("#testform").serializearray();

map形式でパラメータを受け取ることが出来れば、パラメータ追加も

param.hoge4 = 4;

の様に簡単に行うことが出来ますね!

さらにこれをajax通信で活用すれば

 $.ajax({
	dataType: 'json',
	data: param,//ここで先ほど取得したパラメータmapオブジェクトをそのまま入れることが出来る!
	cache: false,
	url: '/hoge/hoge1',
	success: success(),
	error: function(e){}
});

と、受け取ったmapをそのまま非同期通信のパラメータとして使うことが出来るので、便利ですね♪
さらにこれをグローバル変数で保持しておけば、通信後の処理に使う、、などさまざまな場面で使うことが出来ます!

是非参考にしてみてください。

 - JavaScript/jQery