[JavaScript] [jQuery] jQueryでURLのパラメーターを取得する
このページのタグ:[JavaScript] [jQuery] [URL処理]
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)には、パラメーターの値が格納されています。

登録日 :2016-01-24    最終更新日 :2016-05-30
このページのタグ:[JavaScript] [jQuery] [URL処理]
Japanese
プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)