JavaScript를 사용하여 URL 매개변수를 얻는 방법
- 不言원래의
- 2018-11-30 10:37:033156검색
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) 메서드를 호출하여 두 번째 및 후속 문자열을 가져옵니다. (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('&');
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 파일을 실행하면 브라우저에 다음과 같은 효과가 나타납니다.
URL 끝에 매개변수 "q"를 추가하세요. (URL 끝에?q=testabc가 추가됩니다.)
매개변수를 가져오고, 가져온 매개변수 "testabc"를 페이지에 출력할 수 있습니다.
위 내용은 JavaScript를 사용하여 URL 매개변수를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!