首頁 >web前端 >js教程 >如何使用JavaScript取得URL參數

如何使用JavaScript取得URL參數

不言
不言原創
2018-11-30 10:37:033208瀏覽

如果你希望透過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)方法,取得第二個和後續的字串。 (如果URL參數為“?Q = ABCD&m = 30”,則將獲取“q = ABCD&m = 30”。)

隨後,將獲取的字串通過“&”拆分。如果得到的字串是“q = ABCD&m = 30”,則q = ABCD被指派給參數[0],m = 30被指派給參數[1]。

此外,參數的各個元素由'='分隔,取得值和參數名稱,儲存在結果關聯陣列中並作為傳回值傳回。

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的末端。 (?q=testabc被加到URL的末尾。)

如何使用JavaScript取得URL參數

#可以取得參數並且在頁面上輸出所取得的參數「testabc」。

以上是如何使用JavaScript取得URL參數的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn