jak uzyskać zmienne GET i POST z JQuery?

96

Jak to po prostu dostać GETiPOST wartości wartości za pomocą JQuery?

To, co chcę zrobić, to coś takiego:

$('#container-1 > ul').tabs().tabs('select', $_GET('selectedTabIndex'));
Edward Tanguay
źródło

Odpowiedzi:

171

Parametry GET można pobrać z 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"]);

W przypadku parametrów POST można serializować $_POSTobiekt w formacie JSON do <script>tagu:

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

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

Podczas gdy jesteś na tym (robiąc rzeczy po stronie serwera), możesz również zebrać parametry GET w PHP:

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

Uwaga: aby korzystać z wbudowanej json_encodefunkcji, potrzebujesz PHP w wersji 5 lub nowszej .


Aktualizacja: Oto bardziej ogólna implementacja:

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
źródło
3
Twoja metoda wyodrębniania nie uwzględnia argumentów bez wartości (”? Foo & bar = baz“ => {foo: "", bar: "baz"}).
Gumbo
1
Niezły chwyt Gumbo! = W wyrażeniu regularnym powinno być opcjonalne: ... snip ... (?: = ([^ &] *))? &?) / G
Ates Goral
1. Twój pierwszy przykład GET wydaje się nie działać dla mnie. 2. W Twojej aktualizacji nazwa funkcji zawiera literówkę
Jake Wilson
Czy próbowałeś uruchomić to w Safari lub Chrome? Tworzy nieskończoną pętlę i powoduje awarię przeglądarki. Wypróbuj coś tak prostego, jak „? P = 2”
MrColes
@MrColes: Yikes. Minęło trochę czasu, odkąd to napisałem. Od tego czasu odkryłem, że Webkit nie aktualizuje wewnętrznego licznika pozycji obiektu RegExp, gdy jest używany jako literał. Zaktualizuję moją odpowiedź poprawką.
Ates Goral
16

Istnieje wtyczka do jQuery, która pobiera parametry GET o nazwie .getUrlParams

W przypadku POST jedynym rozwiązaniem jest powtórzenie testu POST do zmiennej javascript za pomocą PHP, jak sugerował Moran.

Leandro Ardissone
źródło
6

dlaczego nie użyć starego dobrego PHP? na przykład, powiedzmy, że otrzymujemy parametr GET „target”:

function getTarget() {
    var targetParam = "<?php  echo $_GET['target'];  ?>";
    //alert(targetParam);
}
tony gil
źródło
7
Ponieważ jest to rozwiązanie po stronie serwera, a pytanie dotyczyło strony klienta / javascript / jQuery.
Hrvoje Kusulja
@hkusulja dodaje zniewagę do obrażeń: mimo że to potwierdzasz, nadal nie widzę, że pytanie dotyczy wyłącznie strony serwera. Czuję się gruby jak narzędzie ...
tony gil
1
Ten skrypt jest ohydny. Użyj tego, jeśli chcesz zhakować swoją witrynę. Zawsze unikaj zmiennych wprowadzonych przez użytkownika !! NIE wyświetlaj wartości $ _GET bezpośrednio.
charj,
3

W przypadku dowolnego języka po stronie serwera będziesz musiał emitować zmienne POST do javascript.

.NETTO

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

Uważaj tylko na puste wartości. Jeśli zmienna, którą próbujesz wyemitować, jest w rzeczywistości pusta, pojawi się błąd składni JavaScript. Jeśli wiesz, że to ciąg, powinieneś zawinąć go w cudzysłów. Jeśli jest to liczba całkowita, przed zapisaniem wiersza do javascript możesz przetestować, czy rzeczywiście istnieje.

EndangeredMassa
źródło
1
Jednak nie zawsze masz dostęp do języków po stronie serwera. Na przykład strony GitHub ...
Adam B
2

Oto coś, co pozwoli zebrać wszystkie GETzmienne w obiekcie globalnym, procedura zoptymalizowana przez kilka lat. Od czasu powstania jQuery wydaje się właściwe przechowywanie ich w samym jQuery, sprawdzam z Johnem potencjalną implementację jądra.

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

Przykładowe użycie:

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

Mam nadzieję że to pomoże. ;)

Matt Gardner
źródło
1

Jeśli Twój $ _GET jest wielowymiarowy, może to być to, czego chcesz:

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
źródło
1

proste, ale przydatne do pobierania zmiennych / wartości z adresu 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;
}

Znalazłem to gdzieś w internecie, właśnie naprawiłem kilka błędów

Lukas Liesis
źródło
1

Użyj następującej funkcji:

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

i uzyskaj dostęp do zmiennych, tak jak vars['index']gdzie 'index'jest nazwa zmiennej get.

ashsam786
źródło
Ten kod nie działa w przypadku UTL, takich jak http://foo.com/?a=b#bar. Uważa, że b#barjest to wartość a.
MM
1

Nie komplikuj

zamień VARIABLE_KEY na klucz zmiennej, aby uzyskać jej wartość

 var get_value = window.location.href.match(/(?<=VARIABLE_KEY=)(.*?)[^&]+/)[0]; 
Kareem
źródło
0

Tak dla przypomnienia, chciałem poznać odpowiedź na to pytanie, więc użyłem metody PHP:

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

W ten sposób wszystkie moje uruchomione javascript / jquery będą miały dostęp do wszystkiego w jGets. Czuję, że to ładne, eleganckie rozwiązanie.

Chud37
źródło
0

Moje podejście:

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
źródło