comment obtenir des variables GET et POST avec JQuery?

95

Comment puis-je obtenir simplement GETet POSTvaleurs avec JQuery?

Ce que je veux faire est quelque chose comme ceci:

$('#container-1 > ul').tabs().tabs('select', $_GET('selectedTabIndex'));
Edward Tanguay
la source

Réponses:

170

Pour les paramètres GET, vous pouvez les récupérer à partir de document.location.search:

var $_GET = {};

document.location.search.replace(/\??(?:([^=]+)=([^&]*)&?)/g, function () {
    function decode(s) {
        return decodeURIComponent(s.split("+").join(" "));
    }

    $_GET[decode(arguments[1])] = decode(arguments[2]);
});

document.write($_GET["test"]);

Pour les paramètres POST, vous pouvez sérialiser l' $_POSTobjet au format JSON dans une <script>balise:

<script type="text/javascript">
var $_POST = <?php echo json_encode($_POST); ?>;

document.write($_POST["test"]);
</script>

Pendant que vous y êtes (faire des choses côté serveur), vous pouvez également collecter les paramètres GET sur PHP:

var $_GET = <?php echo json_encode($_GET); ?>;

Remarque: vous aurez besoin de PHP version 5 ou supérieure pour utiliser la json_encodefonction intégrée.


Mise à jour: voici une implémentation plus générique:

function getQueryParams(qs) {
    qs = qs.split("+").join(" ");
    var params = {},
        tokens,
        re = /[?&]?([^=]+)=([^&]*)/g;

    while (tokens = re.exec(qs)) {
        params[decodeURIComponent(tokens[1])]
            = decodeURIComponent(tokens[2]);
    }

    return params;
}

var $_GET = getQueryParams(document.location.search);
Ates Goral
la source
3
Votre méthode d'extraction ne prend pas en compte les arguments sans valeur ("? Foo & bar = baz" => {foo: "", bar: "baz"}).
Gumbo
1
Belle prise Gumbo! Le = dans l'expression régulière doit être rendu facultatif: ... snip ... (?: = ([^ &] *))? &?) / G
Ates Goral
1. Votre premier exemple GET ne semble pas fonctionner pour moi. 2. Dans votre mise à jour, le nom de votre fonction contient une faute de frappe
Jake Wilson
Avez-vous essayé d'exécuter cela dans Safari ou Chrome? Il crée une boucle infinie et plante le navigateur. Essayez-le avec quelque chose d'aussi simple que "? P = 2"
MrColes
@MrColes: Yikes. Cela fait un moment que j'ai écrit ceci. Depuis lors, j'ai découvert que Webkit ne met pas à jour le compteur de position interne de l'objet RegExp lorsqu'il est utilisé comme littéral. Je mettrai à jour ma réponse avec le correctif.
Ates Goral
16

Il existe un plugin pour jQuery pour obtenir les paramètres GET appelé .getUrlParams

Pour POST, la seule solution est de faire écho au POST dans une variable javascript en utilisant PHP, comme Moran l'a suggéré.

Leandro Ardissone
la source
6

pourquoi ne pas utiliser le bon vieux PHP? par exemple, disons que nous recevons un paramètre GET 'target':

function getTarget() {
    var targetParam = "<?php  echo $_GET['target'];  ?>";
    //alert(targetParam);
}
Tony Gil
la source
7
Parce qu'il s'agit d'une solution côté serveur et que la question concernait le côté client / javascript / jQuery.
Hrvoje Kusulja
@hkusulja ajoutant l'insulte à la blessure: même si vous l'affirmez, je ne vois toujours pas que la question est exclusivement côté serveur. Je me sens épais comme un outil ...
tony gil
1
Ce script est affreux. Utilisez ceci si vous voulez que votre site soit piraté. Échappez toujours aux variables entrées par l'utilisateur !! NE PAS afficher directement $ _GET.
charj
3

Avec n'importe quel langage côté serveur, vous devrez émettre les variables POST en javascript.

.NET

var my_post_variable = '<%= Request("post_variable") %>';

Faites juste attention aux valeurs vides. Si la variable que vous essayez d'émettre est réellement vide, vous obtiendrez une erreur de syntaxe javascript. Si vous savez que c'est une chaîne, vous devez la mettre entre guillemets. S'il s'agit d'un entier, vous voudrez peut-être tester pour voir s'il existe réellement avant d'écrire la ligne en javascript.

En voie de disparitionMassa
la source
1
Cependant, vous n'avez pas toujours accès aux langues côté serveur. Par exemple des pages GitHub ...
Adam B
2

Voici de quoi rassembler toutes les GETvariables d'un objet global, une routine optimisée sur plusieurs années. Depuis la montée en puissance de jQuery, il semble maintenant approprié de les stocker dans jQuery lui-même, je vérifie avec John une implémentation potentielle du cœur.

jQuery.extend({
    'Q' : window.location.search.length <= 1 ? {}
        : function(a){
            var i = a.length, 
                r = /%25/g,  // Ensure '%' is properly represented 
                h = {};      // (Safari auto-encodes '%', Firefox 1.5 does not)
            while(i--) {
                var p = a[i].split('=');
                h[ p[0] ] = r.test( p[1] ) ? decodeURIComponent( p[1] ) : p[1];
            }
            return h;
        }(window.location.search.substr(1).split('&'))
});

Exemple d'utilisation:

switch ($.Q.event) {
    case 'new' :
        // http://www.site.com/?event=new
        $('#NewItemButton').trigger('click');
        break;
    default :
}

J'espère que cela t'aides. ;)

Matt Gardner
la source
1

Si votre $ _GET est multidimensionnel, c'est peut-être ce que vous voulez:

var $_GET = {};
document.location.search.replace(/\??(?:([^=]+)=([^&]*)&?)/g, function () {
    function decode(s) {
            return decodeURIComponent(s.split("+").join(" "));
    }

    //handling for multidimensional arrays
    if(decode(arguments[1]).indexOf("[]") > 0){
        var newName = decode(arguments[1]).substring(0, decode(arguments[1]).length - 2);
        if(typeof $_GET[newName] == 'undefined'){
            $_GET[newName] = new Array();
        }
        $_GET[newName].push(decode(arguments[2]));
    }else{
        $_GET[decode(arguments[1])] = decode(arguments[2]);
    }
});
WoodyNaDobhar
la source
1

simple, mais pourtant utile pour obtenir des variables / valeurs à partir de l'URL:

function getUrlVars() {
    var vars = [], hash, hashes = null;
    if (window.location.href.indexOf("?") && window.location.href.indexOf("&")) {
        hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    } else if (window.location.href.indexOf("?")) {
        hashes = window.location.href.slice(window.location.href.indexOf('?') + 1);
    }
    if (hashes != null) {
        for (var i = 0; i < hashes.length; i++) {
            hash = hashes[i].split('=');
            vars[hash[0]] = hash[1];
        }
    }
    return vars;
}

Je l'ai trouvé quelque part sur Internet, juste corrigé quelques bugs

Lukas Liesis
la source
1

Utilisez la fonction suivante:

var splitUrl = function() {
    var vars = [], hash;
    var url = document.URL.split('?')[0];
    var p = document.URL.split('?')[1];
    if(p != undefined){
        p = p.split('&');
        for(var i = 0; i < p.length; i++){
            hash = p[i].split('=');
            vars.push(hash[1]);
            vars[hash[0]] = hash[1];
        }
    }
    vars['url'] = url;
    return vars;
};

et accédez aux variables comme vars['index']'index'est le nom de la variable get.

ashsam786
la source
Ce code échoue pour les UTL comme http://foo.com/?a=b#bar. Il pense que b#barc'est la valeur pour a.
MM
1

Rester simple

remplacez VARIABLE_KEY par la clé de la variable pour obtenir sa valeur

 var get_value = window.location.href.match(/(?<=VARIABLE_KEY=)(.*?)[^&]+/)[0]; 
Kareem
la source
0

Pour mémoire, je voulais connaître la réponse à cette question, j'ai donc utilisé une méthode PHP:

<script>
var jGets = new Array ();
<?
if(isset($_GET)) {
    foreach($_GET as $key => $val)
        echo "jGets[\"$key\"]=\"$val\";\n";
}
?>
</script>

De cette façon, tous mes javascript / jquery qui s'exécutent après cela peuvent accéder à tout dans les jGets. C'est une belle solution élégante que je ressens.

Chud37
la source
0

Mon approche:

var urlParams;
(window.onpopstate = function () {
var match,
      pl     = /\+/g,  Regex for replacing addition symbol with a space
       search = /([^&=]+)=?([^&]*)/g,
      decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
       query  = window.location.search.substring(1);
   urlParams = {};
   while (match = search.exec(query))
    urlParams[decode(match[1])] = decode(match[2]);
})();
otaxige_aol
la source