ホームページ > 記事 > ウェブフロントエンド > JavaScriptを使用してURLパラメータを取得する方法
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 サイトの他の関連記事を参照してください。