JavaScript에서 "GET"요청 매개 변수를 얻는 방법은 무엇입니까?


답변:


185

모든 데이터는

window.location.search

예를 들어 문자열을 구문 분석해야합니다.

function get(name){
   if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
      return decodeURIComponent(name[1]);
}

GET 변수 이름을 매개 변수로 사용하여 함수를 호출하십시오.

get('foo');

이 함수는 변수 값을 반환하거나 변수에 값이 없거나 존재하지 않으면 정의되지 않습니다.


@Daniel Silveira : 예, 값을 디코딩하고 이름을 인코딩해야합니다. 잠시 후 내 게시물을 편집합니다
Rafael

2
decodeURIComponent는 / all / 가능한 URI 이스케이프를 디코딩하지 않습니다. 특히 "+"는 ""로 디코딩되지 않습니다. (어떤 브라우저에 있었는지 잊어 버렸습니다. FF, 아마도?) 사양에서는 encodeUIRComponent가 인코딩하는 것만 정확히 디코딩해야하며 ""을 "% 20"으로 인코딩하므로 "+"는 그대로 둡니다.
Jesse Rusak

이것이 제가 PHP를 좋아하는 이유입니다
ymakux 2014 년

2
@volocuga는 PHP와 달리 JavaScript에서 URL을 처리하는 것은 매우 드문 작업이므로 브라우저 공급 업체는 이러한 기능에 실제로 집중하지 않았습니다.
Rafael

) 훌륭하게 라파엘 대답
잘랄 Sordo

36

다음 jquery.url과 같이 사용할 수 있습니다 .

var xyz = jQuery.url.param("param_in_url");

소스 코드 확인

업데이트 된 소스 : https://github.com/allmarkedup/jQuery-URL-Parser


1
멋진 대답은,하지만 링크가 죽었
아담 케이시

@Adam 그렇게 보일 것입니다. 나는 이것이 업데이트 된 URL이라고 생각한다 : github.com/allmarkedup/jQuery-URL-Parser Mark Perkins jquery.url에 대한 구글 검색은 나를 업데이트로 이끌었다. 필요한 경우이 답변을 게시했을 때 출처가 있습니다.
Kaos 2013

3
그래서 플러그인이 필요합니까?
JohnK

var xyz = jQuery.url().param("param_in_url");jQuery.url()현재 페이지 URL을 제공 하는 올바른 구문 입니다. 수정 해주세요.
Ahmed Akhtar 2017 년

13

모든 요청을 포함하는 객체를 원한다면 내 2 센트를 넣으십시오.

function getRequests() {
    var s1 = location.search.substring(1, location.search.length).split('&'),
        r = {}, s2, i;
    for (i = 0; i < s1.length; i += 1) {
        s2 = s1[i].split('=');
        r[decodeURIComponent(s2[0]).toLowerCase()] = decodeURIComponent(s2[1]);
    }
    return r;
};

var QueryString = getRequests();

//if url === "index.html?test1=t1&test2=t2&test3=t3"
console.log(QueryString["test1"]); //logs t1
console.log(QueryString["test2"]); //logs t2
console.log(QueryString["test3"]); //logs t3

각 get 매개 변수의 키는 소문자로 설정됩니다. 그래서 헬퍼 기능을 만들었습니다. 이제 대소 문자를 구분하지 않습니다.

function Request(name){
    return QueryString[name.toLowerCase()];
}

1
이 방법을 정말 좋아합니다. +1
Ben Racicot 2015

11

아래 코드를 시도하면 url에서 GET 매개 변수를 얻는 데 도움이됩니다. 자세한 사항은.

 var url_string = window.location.href; // www.test.com?filename=test
    var url = new URL(url_string);
    var paramValue = url.searchParams.get("filename");
    alert(paramValue)

location.hash 부분 때문에 localhost : 8080 / # /? access_token = 111 예제에서는 작동하지 않습니다 . '#'기호가 발생하면 location.search이 비어
막심 티호 노프

"#"기호가있는 url은 지원되지 않으므로 제거해야합니다. 이것을 시도하십시오 : var url_string = window.location.href; // www.test.com?filename=test var url = new URL (url_string.replace ( "# /", "")); var paramValue = url.searchParams.get ( "access_token"); alert (paramValue)
VISHNU Radhakrishnan

Internet Explorer에서 지원되지 않음
Sebastian Scholle

5

URL을 사용하여 GET 변수를 얻을 수 있습니다. 특히, window.location.search'?'뒤에 (포함) 모든 것을 제공합니다. window.location에 대한 자세한 내용은 여기에서 확인할 수 있습니다 .


3

오늘은 내가 조금과 함께 다음을 넣어 있도록 연관 배열로 페이지의 요청 매개 변수를 얻을 필요 도움 에서 친구 . 또한 =as 없이 매개 변수를 처리합니다 true.

예를 들어 :

// URL: http://www.example.com/test.php?abc=123&def&xyz=&something%20else

var _GET = (function() {
    var _get = {};
    var re = /[?&]([^=&]+)(=?)([^&]*)/g;
    while (m = re.exec(location.search))
        _get[decodeURIComponent(m[1])] = (m[2] == '=' ? decodeURIComponent(m[3]) : true);
    return _get;
})();

console.log(_GET);
> Object {abc: "123", def: true, xyz: "", something else: true}
console.log(_GET['something else']);
> true
console.log(_GET.abc);
> 123

2

현재 페이지의 URL을 구문 분석하여 GET 매개 변수를 얻을 수 있습니다. URL은를 사용하여 찾을 수 있습니다 location.href.


서버가 다른 곳으로 리디렉션했을 수 있으므로 이것은 완전히 신뢰할 수있는 것은 아닙니다. 그러나 그것은 당신이 할 수있는 최선입니다.
Joel Coehoorn


2

지도 축소 솔루션 :

var urlParams = location.search.split(/[?&]/).slice(1).map(function(paramPair) {
        return paramPair.split(/=(.+)?/).slice(0, 2);
    }).reduce(function (obj, pairArray) {            
        obj[pairArray[0]] = pairArray[1];
        return obj;
    }, {});

용법:

For url: http://example.com?one=1&two=2
console.log(urlParams.one) // 1
console.log(urlParams.two) // 2

1
이를 위해지도 축소 솔루션을 사용하는 이유를 말씀해 주시겠습니까? 내가 이해하는 한, map-reduce는 정말 큰 데이터 세트를 처리 할 때 효율적입니다. 이것은 HTTP 요청 일 뿐이므로 맵 축소 솔루션을 사용하는 요점이 보이지 않습니다.
JorgeGRC 2015 년

실제로 map/reduce는 컬렉션 처리 메커니즘 일뿐입니다. 모든 크기의 데이터와 함께 사용할 수 있습니다. 병렬화하려는 의지로 인해 빅 데이터로 더 유명합니다
StephenBoesch

1

다른 답변과 달리 UrlSearchParams객체는 Regexes 또는 기타 문자열 조작을 피할 수 있으며 대부분의 최신 브라우저에서 사용할 수 있습니다.

var queryString = location.search
let params = new URLSearchParams(queryString)
// example of retrieving 'id' parameter
let id = parseInt(params.get("id"))
console.log(id)

이 답변을 다른 답변과 좀 더 차별화하기 위해 설명을 추가해 주시겠습니까?
Giulio Caccin

0

여기서 함수는 이름으로 매개 변수를 반환합니다. 약간의 변경으로 기본 URL, 매개 변수 또는 앵커를 반환 할 수 있습니다.

function getUrlParameter(name) {
    var urlOld          = window.location.href.split('?');
    urlOld[1]           = urlOld[1] || '';
    var urlBase         = urlOld[0];
    var urlQuery        = urlOld[1].split('#');
    urlQuery[1]         = urlQuery[1] || '';
    var parametersString = urlQuery[0].split('&');
    if (parametersString.length === 1 && parametersString[0] === '') {
        parametersString = [];
    }
    // console.log(parametersString);
    var anchor          = urlQuery[1] || '';

    var urlParameters = {};
    jQuery.each(parametersString, function (idx, parameterString) {
        paramName   = parameterString.split('=')[0];
        paramValue  = parameterString.split('=')[1];
        urlParameters[paramName] = paramValue;
    });
    return urlParameters[name];
}

0

나를 위해 작동

URL : http : // localhost : 8080 / # /? access_token = 111

function get(name){
  const parts = window.location.href.split('?');
  if (parts.length > 1) {
    name = encodeURIComponent(name);
    const params = parts[1].split('&');
    const found = params.filter(el => (el.split('=')[0] === name) && el);
    if (found.length) return decodeURIComponent(found[0].split('=')[1]);
  }
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.