HTMLリンクでパラメータを渡しJQueryで受取処理をする方法

パラメータを使うと、Webサイトで処理できることがいろいろと広がります。
簡単なプログラミングを取り入れるだけでも様々なことができるので、Webデザイナーの方でも覚えておくと便利だと思います。

今回はそんなパラメータの使い方の基礎として、HTMLとJQueryを使って紹介していきます。

HTMLリンクでパラメータを渡す

まずはHTMLリンクにパラメータを付与する方法について紹介します。
ファイル名を指定しない場合は下記コードとなります

<a href="sample/?変数名=値"></a>

次にファイル名を指定した場合は下記コードとなります。

<a href="sample/index.html?変数名=値"></a>

また複数のパラメータを付与する場合は下記コードとなります。

<a href="sample/?変数名=値&変数名=値&変数名=値"></a>

複数の場合は&を付けて、次の値を記述していきます。

このようにして作成されたリンクをクリックすると、遷移先のページのURLには本来のURLの末尾に、設定して変数名と値も付けられた状態になるのです。
例を挙げますと下記のようになります。

<a href="sample/?color=red">ボタン</a>
↓↓
遷移先ページのURL
https://〇〇〇〇〇〇.com/sample/?color=red

以上がHTMLリンクを使ったパラメータの渡し方となります。

リンク先のページで受取ったパラメータをJQuery処理

次にリンク先のページで受け取ったパラメータを、JQueryを使って処理し活用していきます。
今回は下記URLを前提としていきます。

このURLをJQueryを使って値を取り出します。
JQueryのコードは下記となります。

$(document).ready( function(){
	var args  = new Object;
	url = location.search.substring(1).split('&');

	for(i=0; url[i]; i++) {
		var k = url[i].split('=');
		args[k[0]] = k[1];
	}
	var id = args.color;
});

この処理で、9行目の変数idにはredの値が入ります。

この値をもとに、JQueryで処理していきたいことを実行していきます。
個人的に良く使うのは、特定ページから来た場合に、ファームなどの初期設定を変更した状態にするなどの処理に活用しています。

HTMLリンクでパラメータを渡しJQueryで受取処理をする方法まとめ

HTMLリンクでパラメータを渡し、JQueryで受取処理をする方法について紹介してきました。
簡単なJQueryコードを書くことができれば、様々な処理に活用できるので是非憶えて活用してみてくださいね。