ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptを使用してURLパラメータを取得する方法

JavaScriptを使用してURLパラメータを取得する方法

不言
不言オリジナル
2018-11-30 10:37:033163ブラウズ

JavaScript 経由で URL パラメーターを取得して使用する場合。 JavaScript では、「document.location.search」を使用して URL のパラメーターを取得できます。ただし、パラメータの文字列は URL パスの直後にしか取得できないため、取得した文字列を解析して各パラメータの値を取得する必要があります。

JavaScriptを使用してURLパラメータを取得する方法

例を直接見てみましょう

コードは次のとおりです

GetParam.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
      <script type="text/javascript">
        window.onload = function onLoad() {
            param = GetQueryString();
            target = document.getElementById("param");
            target.innerHTML = param["q"];
        }
        function GetQueryString() {
            if (1 < document.location.search.length) {
                var query = document.location.search.substring(1);
                var parameters = query.split(&#39;&&#39;);
                var result = new Object();
                for (var i = 0; i < parameters.length; i++) {
                    var element = parameters[i].split(&#39;=&#39;);
                    var paramName = decodeURIComponent(element[0]);
                    var paramValue = decodeURIComponent(element[1]);
                    result[paramName] = decodeURIComponent(paramValue);
                }
                return result;
            }
            return null;
        }
      </script>
</head>
<body>
<div>这是一个参数</div>
    <div id="param"></div>
</body>
</html>

注:

URL パラメーター部分の文字列は、「document.location.search」属性を通じて取得できます。 substring(1) メソッドを呼び出して 2 番目以降の文字列を取得します。 (URLパラメータが「?Q=ABCD&m=30」の場合、「q=ABCD&m=30」が取得されます。)

続いて、取得した文字列を「&」で分割します。取得した文字列が「q=ABCD&m=30」の場合、parameter[0]にq=ABCD、parameter[1]にm=30が代入されます。

さらに、パラメータの個々の要素は「=」で区切られ、値とパラメータ名が取得され、結果の連想配列に格納され、戻り値として返されます。

function GetQueryString() {
  if (1 < document.location.search.length) {    
     var query = document.location.search.substring(1);
     var parameters = query.split(&#39;&&#39;);
    var result = new Object();    
  for (var i = 0; i < parameters.length; i++) {      
       var element = parameters[i].split(&#39;=&#39;);
      var paramName = decodeURIComponent(element[0]);      
  var paramValue = decodeURIComponent(element[1]);
       result[paramName] = decodeURIComponent(paramValue);
    }
    return result;
  }
  return null;}

実行結果

HTML ファイルを実行すると、ブラウザに次のような効果が表示されます。

JavaScriptを使用してURLパラメータを取得する方法

パラメータ「q」を URL の末尾に追加します。 (URL の最後に?q=testabc が付加されます。)

JavaScriptを使用してURLパラメータを取得する方法

でパラメータを取得し、取得したパラメータ「testabc」をページ上に出力することができます。

以上がJavaScriptを使用してURLパラメータを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。