JavaScript/アンカーでpostする

キーワード

  • HTML
  • JavaScript/jQuery

概要

アンカーなんだけど(しかもパラメータつきの)ポストしたい。

URLのバーにコード値などを表示させたくないという強い要望のため。

方法

jQuery('a.post').click(function() {
	var a = this;
	var action = jQuery(a).attr('href').split('?')[0];
	var parameters = jQuery(a).attr('href').split('?')[1];
	var form = jQuery('<form />').attr('method', 'post').attr('action', action); 
	jQuery.each(parameters.split('&'), function() {
		var name = this.split('=')[0];
		var value = this.split('=')[1];
		jQuery(form).append(
				jQuery('<input />')
				.attr('type', 'hidden')
				.attr('name', name)
				.attr('value', value)
		);
	});
	jQuery('body').append(form);
	jQuery(form).submit();
	return false;
});

解説

  1. クリックイベントを拾う
  2. href属性を分解する
  3. formを頑張って作る
  4. 作ったformをbodyにつっこんで
  5. submitする

jQueryで作成しただけのDOMではどうやらsubmitできないくさい。ので、bodyにappendしてあげてからsubmitする。

参考

  • http://blog.bungu-do.jp/archives/3215
作成日 2013-08-17