如何使用jQuery获取GET和POST变量?


Answers:


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参数,您可以将$_POSTJSON格式的对象序列化为<script>标记:

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

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

在进行此操作(在服务器端执行操作)时,也可以在PHP上收集GET参数:

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

注意:您需要PHP 5或更高版本才能使用内置json_encode功能。


更新:这是一个更通用的实现:

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”})。
Gumbo,

1
赶上浓汤!正则表达式中的=应该设为可选:... snip ...(?:=([^&] *))?&?)/ g
Ates Goral

1.您的第一个GET示例似乎对我不起作用。2.在您的更新,你的函数名称中有一个错字
杰克·威尔逊

您是否尝试过使用Safari或chrome浏览器?它创建一个无限循环并使浏览器崩溃。用“?p = 2”之类的简单方法进行尝试
MrColes 2011年

@MrColes:耶克斯。自从我写这篇文章已经有一段时间了。从那时起,我发现Webkit在用作文字时不会更新RegExp对象的内部位置计数器。我将用修复程序更新我的答案。
Ates Goral


6

为什么不使用旧的PHP?例如,假设我们收到一个GET参数'target':

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

7
因为这是服务器端解决方案,所以问题是关于客户端/ javascript / jQuery端的。
Hrvoje Kusulja 2014年

@hkusulja加剧了侮辱:即使您确认,我仍然看不到该问题完全是服务器端的。我感觉自己像工具一样浓...
tony gil 2014年

1
这个脚本是可怕的。如果您希望站点被黑,请使用此选项。总是逃避用户输入的变量!不要直接输出$ _GET。
charj


3

使用任何服务器端语言,您都必须将POST变量发送到javascript中。

。净

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

只是要注意空值。如果您尝试发出的变量实际上为空,则将出现javascript语法错误。如果您知道它是一个字符串,则应将其用引号引起来。如果是整数,则可能需要在将行写入javascript之前进行测试,以查看它是否确实存在。


1
但是,您并不总是可以访问服务器端语言。例如GitHub页面...
Adam B


2

这是将所有GET变量收集到全局对象中的一种方法,这是经过几年优化的例程。由于jQuery的兴起,现在似乎将它们存储在jQuery本身中是合适的,我正在与John一起检查潜在的核心实现。

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 2015年

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]);
})();
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.