使用 Javascript 获取 URL Vars，当 QueryString 中存在多个值时不起作用答案

【问题标题】：Using Javascript to get URL Vars, not working when multiple values present in QueryString使用 Javascript 获取 URL Vars，当 QueryString 中存在多个值时不起作用
【发布时间】：2010-05-17 13:32:47
【问题描述】：

我正在使用 Javascript 函数来获取 URL 的值以使用以下函数传递给 jQuery：

 function getUrlVars()
    {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for(var i = 0; i < hashes.length; i++)
        {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
    return vars;
    }

然后像这样设置值：

 var type = getUrlVars()["type"]

这一切都很完美，但是我刚刚遇到了需要获取多个值的情况，我的表单元素之一是可以检查多个值的复选框，所以我的 URL 看起来像这样：

 http://www.domain.com/test.php?type=1&cuisine[]=23&cuisine[]=43&name=test

如果我使用上面的函数提醒菜系的价值，我只能得到最终的价值：

 alert (getUrlVars()["cuisine[]"]);

会提示“43”。

我希望它是所有“cuisine”值的逗号分隔字符串。即在上面的例子中“23,43”

非常欢迎任何帮助！如果任何解决方案需要它，我正在使用 PHP 5.3 和 Jquery 1.4

【问题讨论】：

标签： javascript jquery query-string

【解决方案1】：

    function getUrlVars()
    {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for(var i = 0; i < hashes.length; i++)
        {
            hash = hashes[i].split('=');

            if($.inArray(hash[0], vars)>-1)
            {
                vars[hash[0]]+=","+hash[1];
            }
            else
            {
                vars.push(hash[0]);
                vars[hash[0]] = hash[1];
            }
        }

        return vars;
    }

【讨论】：

【解决方案2】：

如果 vars[hash[0]] 已经存在，你只需要检查你的循环，如果是这样，那么而不是做 vars[hash[0]] = hash[1];你会做 vars[hash[0]] += ',' + hash[1];

【讨论】：

【解决方案3】：

一个更合适的解决方案，因为查询字符串应该具有唯一键是向表单添加一个隐藏字段，然后在 onsubmit 事件中循环复选框并设置值隐藏字段到聚合值形成复选框。

脚本

function getValues(){
    var inputs= document.getElementById("myForm").getElementsByTagName("input"), i=inputs.length;
    var values=[];
    while (i--){
        if (inputs[i].type == "checkbox" && inputs[i].checked) {
            values.push(inputs[i].value);
        }
    }
    document.getElementById("hiddenField").value=values.join();
}

还有 HTML

<form id="myForm" onsubmit="getValues()">
<input type="hidden" name="values" id="hiddenField"/>
<input type="checkbox" id="chk1" value="1"/>
<input type="checkbox" id="chk1" value="2"/>
<input type="submit" value="submit"/>
</form>

这比覆盖基于键/值的参数的默认（和预期行为）要好。

【讨论】：

【解决方案4】：

试试this plugin

【讨论】：