JavaScriptを使用してURLパラメータを取得する方法-jsチュートリアル-php.cn

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

不言

リリース： 2018-12-03 09:10:32

オリジナル

3184 人が閲覧しました

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パラメータを取得する方法