як отримати змінні GET і POST за допомогою JQuery?


95

Як я просто отримую GETі POSTзначення за допомогою JQuery?

Я хочу зробити щось подібне:

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

Відповіді:


170

Для параметрів GET ви можете отримати їх із 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"]);

Для параметрів POST ви можете серіалізувати $_POSTоб’єкт у форматі JSON у <script>тег:

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

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

Поки ви займаєтесь цим (робите справи на стороні сервера), ви також можете збирати параметри GET на PHP:

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

Примітка. Для використання вбудованої json_encodeфункції вам знадобиться PHP версії 5 або новішої .


Оновлення: Ось більш загальна реалізація:

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

3
Ваш метод вилучення не враховує аргументи без значення (”? Foo & bar = baz“ => {foo: "", bar: "baz"}).
Гамбо

1
Гарний улов Гамбо! = У регулярному виразі слід зробити необов'язковим: ... snip ... (?: = ([^ &] *))? &?) / G
Ates Goral

1. Ваш перший приклад GET, здається, не працює для мене. 2. У вашому оновленні назва вашої функції містить друкарську помилку
Jake Wilson,

Ви пробували запускати це в сафарі чи хромі? Це створює нескінченний цикл і збій браузера. Спробуйте щось настільки просте, як "? P = 2"
MrColes,

@MrColes: Так. Минув деякий час, відколи я це написав. З тих пір я виявив, що Webkit не оновлює внутрішній лічильник позицій об’єкта RegExp, коли він використовується як літерал. Я оновлю свою відповідь виправленням.
Ates Goral,

16

Існує плагін для jQuery для отримання параметрів GET з назвою .getUrlParams

Для POST єдиним рішенням є перетворення POST у змінну javascript за допомогою PHP, як запропонував Моран.


6

чому б не використовувати старий добрий PHP? наприклад, скажімо, ми отримуємо параметр GET 'target':

function getTarget() {
    var targetParam = "<?php  echo $_GET['target'];  ?>";
    //alert(targetParam);
}

7
Оскільки це рішення на стороні сервера, і питання стосувалося сторони клієнта / javascript / jQuery.
Hrvoje Kusulja

@hkusulja додає образу до травми: навіть якщо ти це підтверджуєш, я все одно не бачу, що питання стосується виключно серверної сторони. я відчуваю себе товстим як інструмент ...
Тоні Гіл

1
Цей сценарій жахливий. Використовуйте це, якщо ви хочете зламати ваш сайт. Завжди уникати введених користувачем змінних !! НЕ виводити $ _GET безпосередньо.
charj

5

Або ви можете використовувати цей http://plugins.jquery.com/project/parseQuery , він менший за більшість (зменшені 449 байт), повертає об’єкт, що представляє пари імені-значення.


3

З будь-якою мовою на стороні сервера вам доведеться передавати змінні POST у javascript.

.NET

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

Тільки будьте обережні з порожніми значеннями. Якщо змінна, яку ви намагаєтесь випустити, насправді порожня, ви отримаєте синтаксичну помилку javascript. Якщо ви знаєте, що це рядок, вам слід обернути його в лапки. Якщо це ціле число, можливо, ви захочете перевірити, чи справді воно існує, перед тим, як написати рядок у javascript.


1
Однак ви не завжди маєте доступ до серверних мов. Наприклад, сторінки GitHub ...
Адам Б,


2

Ось щось, щоб зібрати всі GETзмінні в глобальному об’єкті, що оптимізується протягом декількох років. З моменту підйому jQuery зараз здається доцільним зберігати їх у самому jQuery, я перевіряю у Джона потенційну основну реалізацію.

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

Приклад використання:

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

Сподіваюся, це допомагає. ;)



1

Якщо ваш $ _GET багатовимірний, можливо, це те, що ви хочете:

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

1

простий, але корисний для отримання змін / значень з 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;
}

Я знайшов це десь в Інтернеті, просто виправив кілька помилок


1

Використовуйте наступну функцію:

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

і доступ до змінних як vars['index']де 'index'є ім’я змінної get.


Цей код не працює для таких UTL, як http://foo.com/?a=b#bar. Він вважає, що b#barце цінність для a.
MM

1

Не ускладнювати

замініть VARIABLE_KEY ключем змінної, щоб отримати її значення

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

0

Тільки для запису, я хотів знати відповідь на це запитання, тому використав метод PHP:

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

Таким чином, усі мої javascript / jquery, які запускаються після цього, можуть отримати доступ до всього в jGets. Це приємне елегантне рішення, яке я відчуваю.


0

Мій підхід:

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]);
})();
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.