como obter variáveis ​​GET e POST com JQuery?

95

Como posso simplesmente obter GETe POSTvalores com JQuery?

O que eu quero fazer é algo assim:

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

Respostas:

170

Para parâmetros GET, você pode obtê-los 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"]);

Para parâmetros POST, você pode serializar o $_POSTobjeto no formato JSON em uma <script>tag:

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

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

Enquanto você está nisso (fazendo coisas no lado do servidor), você pode coletar os parâmetros GET no PHP também:

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

Observação: você precisará do PHP versão 5 ou superior para usar a json_encodefunção integrada.


Atualização: aqui está uma implementação mais genérica:

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
fonte
3
Seu método de extração não considera argumentos sem valor (”? Foo & bar = baz“ => {foo: "", bar: "baz"}).
Gumbo
1
Boa captura Gumbo! O = na regex deve ser opcional: ... recorte ... (?: = ([^ &] *))? &?) / G
Ates Goral
1. Seu primeiro exemplo GET não parece funcionar para mim. 2. Em sua atualização, o nome da função contém um erro de digitação
Jake Wilson,
Você já tentou executá-lo no Safari ou no Chrome? Ele cria um loop infinito e trava o navegador. Experimente com algo tão simples como "? P = 2"
MrColes
@MrColes: Caramba. Já faz um tempo desde que escrevi isso. Desde então, descobri que o Webkit não atualiza o contador de posição interno do objeto RegExp quando ele é usado como um literal. Vou atualizar minha resposta com a correção.
Ates Goral
16

Existe um plugin para jQuery para obter parâmetros GET chamado .getUrlParams

Para o POST, a única solução é ecoar o POST em uma variável javascript usando PHP, como Moran sugeriu.

Leandro Ardissone
fonte
6

por que não usar o bom e velho PHP? por exemplo, digamos que recebemos um parâmetro GET 'alvo':

function getTarget() {
    var targetParam = "<?php  echo $_GET['target'];  ?>";
    //alert(targetParam);
}
Tony Gil
fonte
7
Porque esta é a solução do lado do servidor, e a questão era sobre o lado do cliente / javascript / jQuery.
Hrvoje Kusulja
@hkusulja adicionando insulto à injúria: embora você afirme, ainda não consigo ver que a questão é exclusivamente do lado do servidor. Eu me sinto grosso como uma ferramenta ...
Tony gil
1
Este script é horrível. Use-o se quiser que seu site seja hackeado. Sempre escape das variáveis ​​inseridas pelo usuário !! NÃO envie $ _GET diretamente.
charj
3

Com qualquer linguagem do lado do servidor, você terá que emitir as variáveis ​​POST em javascript.

.INTERNET

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

Apenas tome cuidado com os valores vazios. Se a variável que você tenta emitir estiver realmente vazia, você obterá um erro de sintaxe javascript. Se você sabe que é uma string, deve colocá-la entre aspas. Se for um número inteiro, você pode querer testar para ver se ele realmente existe antes de escrever a linha em javascript.

EndangeredMassa
fonte
1
Você nem sempre tem acesso a idiomas do lado do servidor. Por exemplo, páginas do GitHub ...
Adam B
2

Você pode tentar o plugin Query String Object para jQuery.

Burak Erdem
fonte
2

Aqui está algo para reunir todas as GETvariáveis ​​em um objeto global, uma rotina otimizada ao longo de vários anos. Desde o surgimento do jQuery, agora parece apropriado armazená-los no próprio jQuery, estou verificando com John sobre uma implementação de núcleo potencial.

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('&'))
});

Exemplo de uso:

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

Espero que isto ajude. ;)

Matt Gardner
fonte
1

Se o seu $ _GET for multidimensional, isso pode ser o que você está querendo:

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
fonte
1

simples, mas útil para obter vars / valores de 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;
}

Eu encontrei em algum lugar na internet, apenas consertei alguns bugs

Lukas Liesis
fonte
1

Use a seguinte função:

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;
};

e variáveis ​​de acesso como vars['index']where 'index'é o nome da variável get.

ashsam786
fonte
Este código falha para UTLs como http://foo.com/?a=b#bar. Ele pensa que b#baré o valor para a.
MM de
1

Mantenha simples

substitua VARIABLE_KEY pela chave da variável para obter seu valor

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

Apenas para registro, eu queria saber a resposta a esta pergunta, então usei um método PHP:

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

Dessa forma, todo o meu javascript / jquery que roda depois disso pode acessar tudo nos jGets. É uma solução agradável e elegante, eu sinto.

Chud37
fonte
0

Minha abordagem:

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
fonte