[JavaScript]リンクのURLクエリをPOSTで送信する

先日、検索 → 一覧 → 詳細 という画面に対して、

1. 一覧から詳細画面へはリンクをつかって遷移すること
2. 詳細画面から一覧画面へは「パンくず」リンクを利用して戻れるようにすること
3. 一覧画面は検索したときの条件で絞り込まれた一覧が表示されること
4. 詳細画面へのＵＲＬに検索条件のURLクエリをつけず、詳細データへのIDのみをクエリにつけること
5. Cookie（セッション）利用不可

という依頼を受けました。
SEO対策のためにURLに余計なクエリをつけたくないけど、パンくずのフローは辿ってきたフローをちゃんと戻れるようにしたいというのが趣旨でした。
そこでHTMLを生成するときには、ID、検索条件ともにリンクのURLにクエリとして追加しておき、Javascriptを利用して、URLからクエリの一部を抜き取り、リンクをクリックしたときに、それらがPOSTされるようにしました。
書いておけば、後々役に立つかなと思ったので書いてみることにしました。
下がそのサンプルになります。
どちらも同じＵＲＬを指定していますが、開く画面は別になるようになっています。

リンクその１
リンクその２

この処理の手順はこんな感じになります。

1. リンク要素を取得する
2. リンクのＵＲＬをアドレスとクエリにわける
3. 動的にフォームを生成し、生成したフォームにクエリをhiddenとして追加していく
4. リンクのhref属性の書き替え
5. リンククリック時に生成したフォームがsubmitされるようにする

1. リンク要素を取得する
   リンクの取得はjQueryの要素セレクタを使いました。また、それぞれの要素に対する処理はeach()関数を利用するようにしました。
   

   	$(document).ready(function() {
   	$("a").each(function() {
   	// ここに処理を書く
   	})
   	});

   view raw 2011-11-urlpost.js hosted with ❤ by GitHub

   
   
2. リンクのＵＲＬをアドレスとクエリにわける
   attr()関数でhref属性の値を取得することができるので、取得したhref属性の値を「?」でわけます。
   

   	$("a").each(function() {
   	var url_split = $(this).attr("href").split('?');
   	});

   view raw 2011-11-urlpost-02.js hosted with ❤ by GitHub

   
   
3. 動的にフォームを生成し、生成したフォームにクエリをhiddenとして追加していく
   要素を動的に追加するのには、appendTo()関数を利用することができます。要素の生成は単純に$()関数の中にhtmlで要素を書き込めば生成することができます。
   また、同じ要領で生成したフォームにhiddenを追加していくことができます。
   

   	// フォームを生成する
   	var id = "form" + counter;
   	$("<form action='" + url_split[0] + "' method='post' id='" + id + "'/>")
   	.attr("target", '_blank')
   	.appendTo('body');
   	// 生成したフォームにクエリの要素をhiddenとして追加していく
   	var query = decodeURI(url_split[1]).split('&');
   	for (var key in query) {
   	var key_value = query[key].split('=');
   	$("<input type='hidden' />")
   	.attr("name", key_value[0])
   	.attr("value", key_value[1])
   	.appendTo("#" + id);
   	}

   view raw 2011-11-urlpost-03.js hosted with ❤ by GitHub

   
   
4. リンクのhref属性の書き替え
   attr()関数でhref属性の書き替えもできるので、これを利用してhref属性を書き替えます。
   

   	// クエリなしのURLをリンクに設定する
   	$(this).attr("href", url_split[0]);
   	// 本当はこっちのほうがいいのかも
   	$(this).attr("href", 'javascript:void(0)');

   view raw 2011-11-urlpost-04.js hosted with ❤ by GitHub

   
   
5. リンククリック時に生成したフォームがsubmitされるようにする
   click()関数を利用して、クリック時の挙動を設定します。
   

   	// リンクをクリックしたときに生成したフォームをsubmitさせる
   	$(this).click(function() {
   	$("#" + id).submit();
   	return false;
   	});

   view raw 2011-11-urlpost-05.js hosted with ❤ by GitHub

   
   ※return false;としないとクリックしたあとにhref属性に設定したURLへ遷移してしまします。

最後にソースをまとめて掲載しておきます。

	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script
	<script type="text/javascript">
	<!--
	$(document).ready(function() {
	var counter = 1;
	$("a").each(function() {
	// URLとクエリを分ける
	var url_split = $(this).attr("href").split('?');
	// フォームを生成する
	var id = "form" + counter;
	$("<form action='" + url_split[0] + "' method='post' id='" + id + "'/>")
	.attr("target", '_blank')
	.appendTo('body');
	// 生成したフォームにクエリの要素をhiddenとして追加していく
	var query = decodeURI(url_split[1]).split('&amp;');
	for (var key in query) {
	var key_value = query[key].split('=');
	$("<input type='hidden' />")
	.attr("name", key_value[0])
	.attr("value", key_value[1])
	.appendTo("#" + id);
	}
	// クエリなしのURLをリンクに設定する
	$(this).attr("href", url_split[0]);
	// リンクをクリックしたときに生成したフォームをsubmitさせる
	$(this).click(function() {
	$("#" + id).submit();
	return false;
	});
	counter += 1;
	});
	});
	//-->
	</script>

view raw postWithLink.js hosted with ❤ by GitHub

※追伸 >- この投稿が役にたったと思った方は、上か下の広告をクリックしていただけるとうれいいです。