JavaScriptとjQueryを利用してURLのパラメーターを取得するコードを紹介します。
概要
jQueryを利用しても、URLパラメーターを取得するメソッドは用意されていないため、実装は
JavaScriptでの実装とほぼ変わりません。
プログラム
コード
下記のHTMLファイルを記述します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript" src="jquery-2.2.1.js"></script>
<script type="text/javascript">
$.extend({
getUrlParams: function () {
if (1 < document.location.search.length) {
var query = document.location.search.substring(1);
var parameters = query.split('&');
var result = new Object();
for (var i = 0; i < parameters.length; i++) {
var element = parameters[i].split('=');
var paramName = decodeURIComponent(element[0]);
var paramValue = decodeURIComponent(element[1]);
result[paramName] = decodeURIComponent(paramValue);
}
return result;
}
return null;
},
getUrlParam: function (name) {
var params = $.getUrlVars();
if (params != null) {
return $.getUrlVars()[name];
} else {
return null;
}
}
});
$(window).load(function () {
var params = $.getUrlParams();
var outstr = "";
for (key in params) {
outstr += key +" = "+ params[key] +"<br/>";
}
$("#output").html(outstr);
});
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
解説
jQueryのextendを利用し、jQueryの拡張メソッドとして実装しています。
実装ロジックは
JavaScript版のコードと同じものを利用しています。
また、extendによるjQueryの拡張メソッドの定義については
こちらの記事を参照してください。
表示結果
上記のHTMLファイルをWebブラウザで表示します。パラメーターが何もない状態では、下図の画面が表示されます。
URLの末尾に"?p=120&q=30&r=8"のパラメーターを付与します。ページ遷移すると下図の画面が表示されます。URLに追加したパラメーターを取得し画面に表示できていることが確認できます。
パラメーターを"?target=ペンギン&dest=くじら"に変更しても正しく動作します。
別の実装
別の実装方法も紹介します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript" src="jquery-2.2.1.js"></script>
<script type="text/javascript">
$.extend({
getUrlVars: function () {
var query = window.location.href.slice(window.location.href.indexOf('?') + 1);
var parameters = query.split('&');
var vars = [];
var hash;
for (var i = 0; i < parameters.length; i++) {
hash = parameters[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
},
getUrlVar: function (name) {
return $.getUrlVars()[name];
}
});
$(window).load(function () {
var params = $.getUrlVars();
var outstr = "";
for (key in params) {
outstr += key +" = "+ params[key] +"<br/>";
}
$("#output").html(outstr);
});
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
解説
先の例と同様にextendを利用して、jQueryの拡張メソッドとして実装しています。コードのロジックは先の例では"document.location.search"を利用していますが、こちらの実装では"window.location.href"を利用しています。
表示結果
上記のHTMLファイルをWebブラウザで表示します。パラメーターが存在しない場合は、下図の画面が表示されます。
パラメーターが存在しない場合はURLが配列に代入され、画面に表示されます。
URLの末尾に "?p=150&q=86&r=12" パラメーターを追加しページを表示します。下図の画面が表示されます。数値のキー(インデックス)(0,1,2)にはパラメーター名が格納され、パラメーター名のキー(インデックス)(p,q,r) にはパラメーターの値が格納されています。
パラメーター名を "?target=くじら&dest=しまうま" にしてアクセスします。先の場合と同様に、数値のキー(インデックス)(0,1)には、パラメーター名が格納され、パラメーター名のキー(インデックス)(target,dest)には、パラメーターの値が格納されています。
著者
iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。
最終更新日: 2024-01-24
作成日: 2016-01-24
