ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScriptを使用してURLパラメータを取得する方法
JavaScriptを使用してURLパラメータを取得する方法
- 不言オリジナル
- 2018-11-30 10:37:033218ブラウズ
JavaScript 経由で URL パラメーターを取得して使用する場合。 JavaScript では、「document.location.search」を使用して URL のパラメーターを取得できます。ただし、パラメータの文字列は 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('&');
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;
}
</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('&');
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;}実行結果
HTML ファイルを実行すると、ブラウザに次のような効果が表示されます。
パラメータ「q」を URL の末尾に追加します。 (URL の最後に?q=testabc が付加されます。)
でパラメータを取得し、取得したパラメータ「testabc」をページ上に出力することができます。
以上がJavaScriptを使用してURLパラメータを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。