如何使用 JQuery 获取 GET 和 POST 变量？答案

【问题标题】：how to get GET and POST variables with JQuery?如何使用 JQuery 获取 GET 和 POST 变量？
【发布时间】：2009-01-13 15:49:28
【问题描述】：

如何使用 JQuery 简单地获取 GET 和 POST 值？

我想做的是这样的：

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

【问题讨论】：

标签： javascript jquery

【解决方案1】：

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参数，可以将JSON格式的$_POST对象序列化成<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);

【讨论】：

您的提取方法不考虑没有值的参数 ("?foo&bar=baz" => {foo:"", bar:"baz"})。
不错的秋葵汤！正则表达式中的 = 应该是可选的： ...snip...(?:=([^&]*))?&?)/g
1.您的第一个 GET 示例似乎对我不起作用。 2.在你的更新中，你的函数名有错别字
你试过在 safari 或 chrome 中运行它吗？它会创建一个无限循环并使浏览器崩溃。尝试使用像“?p=2”这样简单的东西
@MrColes：哎呀。我写这篇文章已经有一段时间了。从那时起，我发现 Webkit 在用作文字时不会更新 RegExp 对象的内部位置计数器。我将通过修复更新我的答案。

【解决方案2】：

有一个用于 jQuery 的插件来获取 GET 参数，称为 .getUrlParams

对于 POST，唯一的解决方案是使用 PHP 将 POST 回显到一个 javascript 变量中，就像 Moran 建议的那样。

【讨论】：

【解决方案3】：

为什么不使用好的旧 PHP？例如，假设我们收到一个 GET 参数“目标”：

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

【讨论】：

因为这是服务器端解决方案，问题是关于客户端/javascript/jQuery 端。
@hkusulja 雪上加霜：即使你确认了，我仍然看不出这个问题完全是服务器端的。我觉得自己像个工具一样厚实……
这个脚本很可怕。如果您希望您的网站被黑，请使用此选项。总是逃避用户输入的变量！！不要直接输出 $_GET。

【解决方案4】：

或者你可以使用这个http://plugins.jquery.com/project/parseQuery，它比大多数都小（最小化 449 字节），返回一个表示名称-值对的对象。

【讨论】：

【解决方案5】：

对于任何服务器端语言，您都必须将 POST 变量发送到 javascript。

.NET

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

请注意空值。如果您尝试发出的变量实际上是空的，您将收到一个 javascript 语法错误。如果你知道它是一个字符串，你应该把它用引号引起来。如果它是一个整数，您可能需要在将行写入 javascript 之前测试它是否确实存在。

【讨论】：

尽管如此，您并不总是可以访问服务器端语言。例如 GitHub 页面...

【解决方案6】：

你可以试试Query String Object jQuery插件。

【讨论】：

【解决方案7】：

这里有一些东西可以将所有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 :
}

希望这会有所帮助。 ;)

【讨论】：

【解决方案8】：

保持简单

将VARIABLE_KEY替换为变量的键，得到它的值

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

【讨论】：

【解决方案9】：

jQuery 插件看起来不错，但我需要的是一个快速的 js 函数来解析 get 参数。这是我发现的。

http://www.bloggingdeveloper.com/post/JavaScript-QueryString-ParseGet-QueryString-with-Client-Side-JavaScript.aspx

【讨论】：

【解决方案10】：

如果您的 $_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]);
    }
});

【讨论】：

【解决方案11】：

简单，但对于从 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;
}

我在网上找到的，只是修复了一些错误

【讨论】：

【解决方案12】：

使用以下函数：

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 变量的名称。

【讨论】：

此代码对于 http://foo.com/?a=b#bar 等 UTL 失败。它认为b#bar 是a 的值。

【解决方案13】：

我的做法：

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

【讨论】：

【解决方案14】：

为了记录，我想知道这个问题的答案，所以我用了一个PHP的方法：

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

这样，在此之后运行的所有 javascript/jquery 都可以访问 jGets 中的所有内容。我觉得这是一个不错的优雅解决方案。

【讨论】：