Maccle

【Ajax/jQuery】Javascriptで大括弧[]で括られた連想配列を取り出す方法

 2016.06.18
約 4 分
【Ajax/jQuery】Javascriptで大括弧[]で括られた連想配列を取り出す方法

Ajaxで非同期通信にてフォームのパラメータを受け取って同一ページ内に結果を表示するページを作ろうと、jQueryでAjax通信を久々にごにょごにょいじってみたけど、フォームデータをシリアライズした連想配列の取り出し方がイマイチわからず…orz

よく考えれば当たり前のことなので、こんなとこで躓く時点で終わってる私ですが、どうせまた忘れるのでメモ。。

本題からちょっと外れるが、jQuery で input、 select -> option 、ラジオボタン、チェックボックスなどのフォームエレメントにセットされた値を取得するには、以下のように書けば一気に取得できる。

// フォーム要素を一括で取得
var formData = $('form');

// GETパラメータのようにシリアル化される
// 例 : name1=val1&name2=val2&name3=val3...
var query = formData.serialize();

// 連想配列にシリアライズ
// 例 : [{name:"name1", value:"val1"}, {name:"name2", value:"val2"},...]
var arrQuery = formData.serializeArray();

このうち、 serialize 関数であればGET送信のように、URLパラメータ形式でフォームの要素がシリアライズされるが、serializeArray 関数の場合は、フォームデータの name と value が1つの連想配列になって複数集まった配列としてデータが返る。

[{name:"username", value:"yamada"}, {name:"job", value:"designer"},...]

これを取り出すには、以下のようにするだけでした(当たり前)。ちゃんちゃん。

for (var key in arrQuery) {
	// 表示例 => 0:username, 1:job
	alert(key + ":" + arrQuery[key]['name']);
	// 表示例 => 0:yamada, 1:desighner
	alert(key + ":" + arrQuery[key]['value']);
}

実際にPOSTしたときにAjaxでPOSTデータを受け取って処理するサンプルは以下。

	$('form').on('submit', function(){
		var formData = $('form');
		var query = formData.serialize();
		var arrQuery = formData.serializeArray();

		// POST用配列
		var postData = {};

		var name = '';
		var val = '';

		// POST用のデータをまとめる
		for (var key in arrQuery) {
			name 	= arrQuery[key]['name'];
			val 	= arrQuery[key]['value'];

			postData[name] =  val;
		}

		// AjaxでPOST
		$.ajax({
			type : 'post',
			url	 : 'result.php',
			data : postData,
			success : function(result) {
				alert(result);
			},
			error : function(result) {
				alert(result);
			}
		});
	});

‘result.php’ に ‘postData’ 配列をPOSTして渡し、正常に処理されると ‘result.php’ の出力内容が ‘result’ 変数に入ってきます。

これで、例えばフォームの送信ボタンが押されたらajaxで非同期通信で別のPHPでPOSTデータを解析して処理するといったことが楽になります。

About The Author

某IT系なんちゃってエンジニアヨーダ
Apple好きだけど盲目マカーは気持ち悪いと思ってる中道だと思い込んでるしがないダメダメエンジニア。

今もってるApple製品↓
Macbook Pro 15 inch, iMac 27 inch (Late 2009), iPhone 6 Plus, iPad (初代! いらない!)
Follow :

Leave A Reply

*

Comment On Facebook