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

Question

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

我想做的事情类似于这样：

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

- Edward Tanguay

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

- Ates Goral

---

你的提取方法没有考虑没有值的参数（"?foo&bar=baz" => {foo:"", bar:"baz"}）。 - Gumbo

很好的发现，Gumbo！正则表达式中的等号应该是可选的：...剪切...(?:=([^&]*))?&?)/g - Ates Goral

@AtesGoral 很遗憾，因为当前实现已经可以支持数组，至少可以通过将其推入结果数组而不是在循环中进行变量赋值来实现。我有一个可工作的修改版本。你认为我应该编辑它吗？ - funforums

OP的问题中没有提到PHP。 - Mark W

有一个提示：$_GET。而且OP在2009年接受了这个作为正确答案，所以我认为可以安全地假设OP的问题与PHP有关。 - Ates Goral

Answer 2

有一个jQuery插件可以获取GET参数，它叫做.getUrlParams

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

- Leandro Ardissone

Answer 3

为什么不使用老牌的PHP呢？例如，假设我们收到一个GET参数'target':

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

- tony gil

---

因为这是服务器端解决方案，而问题是关于客户端/JavaScript/jQuery方面的。 - Hrvoje Kusulja

@hkusulja雪上加霜：尽管你确认了，但我仍然看不出这个问题是仅限于服务器端的。我感觉自己像个笨工具... - tony gil

这个脚本太糟糕了。如果你想让你的网站被黑客攻击，请使用这个。始终对用户输入的变量进行转义！！不要直接输出 $_GET。 - charj

Answer 4

保持简单

用变量的键替换VARIABLE_KEY以获取其值

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

- Kareem

Answer 5

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

- Michael

Answer 6

任何一种服务器端语言，都需要将POST变量导入到JavaScript中。

.NET：

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

要小心空值。如果您尝试发出的变量实际上为空，则会收到javascript语法错误。如果您知道它是字符串，则应将其用引号括起来。如果它是整数，您可能希望在将该行写入javascript之前测试是否存在。

- EndangeredMassa

---

但是你并不总是能够访问服务器端语言。例如GitHub页面... - Adam B

Answer 7

你可以尝试使用 jQuery 的 Query String Object 插件。

- Burak Erdem

Answer 8

这是一个优化了数年的例程，可以将所有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 :
}

希望这可以帮助到您。;）

- Matt

Answer 9

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

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

- Svetoslav Marinov

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

- WoodyNaDobhar