web-dev-qa-db-fra.com

Comment récupérer des paramètres GET à partir de javascript?

http://domain.com/page.html?returnurl=%2Fadmin

Pour js dans page.html, comment peut-il récupérer les paramètres GET?

Pour l'exemple simple ci-dessus, func('returnurl') doit être /admin

Mais cela devrait également fonctionner pour les requêtes complexes ...

javascriptget
328
compile-fan

Avec l'objet window.location . Ce code vous donne GET sans le point d'interrogation.

window.location.search.substr(1)

De votre exemple, il retournera returnurl=%2Fadmin

EDIT: J'ai pris la liberté de changer réponse de Qwerty , ce qui est vraiment bien , et comme il l'a souligné, j'ai suivi exactement ce que le PO a demandé:

function findGetParameter(parameterName) {
    var result = null,
        tmp = [];
    location.search
        .substr(1)
        .split("&")
        .forEach(function (item) {
          tmp = item.split("=");
          if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
        });
    return result;
}

J'ai supprimé l'exécution de la fonction dupliquée de son code, en la remplaçant par une variable (tmp) et j'ai également ajouté decodeURIComponent , exactement comme OP l'a demandé. Je ne sais pas si cela peut ou peut ne pas être un problème de sécurité.

Ou bien avec plain for loop, qui fonctionnera même dans IE8:

function findGetParameter(parameterName) {
    var result = null,
        tmp = [];
    var items = location.search.substr(1).split("&");
    for (var index = 0; index < items.length; index++) {
        tmp = items[index].split("=");
        if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
    }
    return result;
}
343
Bakudan

window.location.search retournera tout de la? sur. Ce code ci-dessous supprimera le?, Utilisez split pour séparer les tableaux de clés/valeurs, puis affectera les propriétés nommées à l'objet params:

function getSearchParameters() {
      var prmstr = window.location.search.substr(1);
      return prmstr != null && prmstr != "" ? transformToAssocArray(prmstr) : {};
}

function transformToAssocArray( prmstr ) {
    var params = {};
    var prmarr = prmstr.split("&");
    for ( var i = 0; i < prmarr.length; i++) {
        var tmparr = prmarr[i].split("=");
        params[tmparr[0]] = tmparr[1];
    }
    return params;
}

var params = getSearchParameters();

Vous pouvez ensuite obtenir le paramètre test de http://myurl.com/?test=1 en appelant params.test.

259
weltraumpirat

tl; dr solution sur une seule ligne de code avec Vanilla javascript

var queryDict = {}
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})

C'est la solution la plus simple . Malheureusement , il ne gère pas les clés à valeurs multiples et les caractères encodés.

"?a=1&a=%2Fadmin&b=2&c=3&d&e"
> queryDict
a: "%2Fadmin"  //overriden with last value, not decoded.
b: "2"
c: "3"
d: undefined
e: undefined

clés à valeurs multiples et caractères codés ?

Voir la réponse d'origine à l'adresse Comment obtenir des valeurs de chaîne de requête en JavaScript?

"?a=1&b=2&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab&a=%2Fadmin"
> queryDict
a: ["1", "5", "t e x t", "/admin"]
b: ["2"]
c: ["3"]
d: [undefined]
e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"]

"?returnurl=%2Fadmin"
> qd.returnurl    // ["/admin"]
> qd['returnurl'] // ["/admin"]
> qd.returnurl[0] // "/admin"
132
Qwerty

Hé, voici la bonne réponse pour 2016:

some = new URLSearchParams("https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8&q=mdn%20query%20string")
var q = some.get('q') // 'mdn query string'
var ie = some.has('ie') // true
some.append('new','here')

console.log(q)
console.log(ie)
console.log(some)

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParamshttps://polyfill.io/v2/docs/features/

82
AKnox

une façon plus élégante de le faire: :)

var options = window.location.search.slice(1)
                      .split('&')
                      .reduce(function _reduce (/*Object*/ a, /*String*/ b) {
                        b = b.split('=');
                        a[b[0]] = decodeURIComponent(b[1]);
                        return a;
                      }, {});
37
Stefan

je le fais comme ceci (pour récupérer un paramètre get spécifique, ici 'parameterName'):

var parameterValue = decodeURIComponent(window.location.search.match(/(\?|&)parameterName\=([^&]*)/)[2]);
9
lsblsb

Celui-ci utilise regex et renvoie null si param n'existe pas ou n'a pas de valeur:

function getQuery(q) {
   return (window.location.search.match(new RegExp('[?&]' + q + '=([^&]+)')) || [, null])[1];
}
6
Ali

Ici, j'ai créé ce code pour transformer les paramètres GET en un objet pour les utiliser plus facilement.

//Get Nav Url
function getNavUrl() {
    //Get Url
    return window.location.search.replace("?", "");
};
function getParameters(url) {
    //Params obj
    var params = {};
    //To lowercase
    url = url.toLowerCase();
    //To array
    url = url.split('&');

    //Iterate over url parameters array
    var length = url.length;
    for(var i=0; i<length; i++) {
        //Create prop
        var prop = url[i].slice(0, url[i].search('='));
        //Create Val
        var value = url[i].slice(url[i].search('=')).replace('=', '');
        //Params New Attr
        params[prop] = value;
    }
    return params;
};
//Call To getParameters
console.log(getParameters(getNavUrl()));
6
Lucas Serena
var getQueryParam = function(param) {
    var found;
    window.location.search.substr(1).split("&").forEach(function(item) {
        if (param ==  item.split("=")[0]) {
            found = item.split("=")[1];
        }
    });
    return found;
};
3
Jonas Sciangula Street

Cette solution gère le décodage d'URL:

var params = function() {
    function urldecode(str) {
        return decodeURIComponent((str+'').replace(/\+/g, '%20'));
    }

    function transformToAssocArray( prmstr ) {
        var params = {};
        var prmarr = prmstr.split("&");
        for ( var i = 0; i < prmarr.length; i++) {
            var tmparr = prmarr[i].split("=");
            params[tmparr[0]] = urldecode(tmparr[1]);
        }
        return params;
    }

    var prmstr = window.location.search.substr(1);
    return prmstr != null && prmstr != "" ? transformToAssocArray(prmstr) : {};
}();

Usage:

console.log('someParam GET value is', params['someParam']);
2
Jonah

J'ai créé une fonction Javascript simple pour accéder aux paramètres GET à partir d'une URL.

Incluez simplement cette source Javascript et vous pourrez accéder aux paramètres get. Exemple: dans http://example.com/index.php?language=french , la variable language est accessible sous la forme $_GET["language"]. De même, une liste de tous les paramètres sera stockée dans une variable $_GET_Params sous forme de tableau. Le code Javascript et le code HTML sont fournis dans l'extrait de code suivant:

<!DOCTYPE html>
<html>
  <body>
    <!-- This script is required -->
    <script>
    function $_GET() {
      // Get the Full href of the page e.g. http://www.google.com/files/script.php?v=1.8.7&country=india
      var href = window.location.href;
        
      // Get the protocol e.g. http
      var protocol = window.location.protocol + "//";
        
      // Get the Host name e.g. www.google.com
      var hostname = window.location.hostname;
        
      // Get the pathname e.g. /files/script.php
      var pathname = window.location.pathname;
        
      // Remove protocol part
      var queries = href.replace(protocol, '');
        
      // Remove Host part
      queries = queries.replace(hostname, '');
        
      // Remove pathname part
      queries = queries.replace(pathname, '');
        
      // Presently, what is left in the variable queries is : ?v=1.8.7&country=india
        
      // Perform query functions if present
      if (queries != "" && queries != "?") {
        
        // Remove question mark '?'
        queries = queries.slice(1);
        
        // Split all the different queries
        queries = queries.split("&");
                
        // Get the number of queries
        var length = queries.length;
                
        // Declare global variables to store keys and elements
        $_GET_Params = new Array();
        $_GET = {};
        
        // Perform functions per query
        for (var i  = 0; i < length; i++) {
                        
          // Get the present query
          var key = queries[i];
                        
          // Split the query and the value
          key = key.split("=");
                        
          // Assign value to the $_GET variable
          $_GET[key[0]] = [key[1]];
                        
          // Assign value to the $_GET_Params variable
          $_GET_Params[i] = key[0];
        }
      }
    }

    // Execute the function
    $_GET();
    </script>
    <h1>GET Parameters</h1>
    <h2>Try to insert some get parameter and access it through javascript</h2>
  </body>
</html>
2
Chandrashekar

Si cela ne vous dérange pas d'utiliser une bibliothèque au lieu de déployer votre propre implémentation, consultez https://github.com/jgallen23/querystring .

2
thSoft

Voici un autre exemple basé sur l'exemple de Kat et Bakudan ci-dessus, mais en le rendant un peu plus générique.

function getParams ()
{
    var result = {};
    var tmp = [];

    location.search
        .substr (1)
        .split ("&")
        .forEach (function (item) 
        {
            tmp = item.split ("=");
            result [tmp[0]] = decodeURIComponent (tmp[1]);
        });

    return result;
}

location.getParams = getParams;

console.log (location.getParams());
console.log (location.getParams()["returnurl"]);
2
E Net Arch

Pour obtenir les paramètres sous forme d'objet JSON:

alert(getUrlParameters().toSource())

function explode(delim, str)
{
    return str.split(delim);
}

function getUrlParameters()
{
    var out = {};
    var str = window.location.search.replace("?", "");
    var subs = explode('&', str);
    for(var i = 0; i < subs.length; ++i)
    {
        var vals = explode('=', subs[i]);
        out[vals[0]] = vals[1];
    }
    return out;
}
1
Randhir Rawatlal

Ma solution s'étend sur @ tak3r

Il retourne un objet vide lorsqu'il n'y a pas de paramètres de requête et supporte la notation de tableau ?a=1&a=2&a=3:

function getQueryParams () {
  function identity (e) { return e; }
  function toKeyValue (params, param) {
    var keyValue = param.split('=');
    var key = keyValue[0], value = keyValue[1];

    params[key] = params[key]?[value].concat(params[key]):value;
    return params;
  }
  return decodeURIComponent(window.location.search).
    replace(/^\?/, '').split('&').
    filter(identity).
    reduce(toKeyValue, {});
}
1
gtramontina

Si vous utilisez angularjs, vous pouvez utiliser $routeParams en utilisant ngRoute module

Vous devez ajouter un module sur votre application

angular.module('myApp', ['ngRoute'])

Maintenant, vous pouvez utiliser le service $routeParams

.controller('AppCtrl', function($routeParams) {
  console.log($routeParams); //json object 
}
1
vusan

Vous pouvez utiliser la fonction de recherche disponible dans l'objet de localisation. La fonction de recherche donne la partie paramètre de l'URL. les détails peuvent être trouvés ici - http://www.javascriptkit.com/jsref/location.shtml

Vous devrez analyser la chaîne résultante pour obtenir les variables et leurs valeurs, par exemple. en les séparant sur '='

0
Gaurav Saxena