jQuery 或 Javascript 在提交时解析查询字符串答案

【问题标题】：jQuery or Javascript to parse querystring on submitjQuery 或 Javascript 在提交时解析查询字符串
【发布时间】：2011-12-15 08:39:01
【问题描述】：

此表单通过复选框有多种选择。例如。 Pet You Own 是多项选择，有多种选择，例如猫、狗、骡子等。

现在默认情况下，发送的查询字符串将如下所示：

?pet=dog&pet=cat&pet=mule

鉴于所有 3 个都已检查。

我需要一种方法来解析它，以便查询字符串看起来像：

?pet=dog,cat,mule

另一个要求是，表单中还有其他参数/输入，因此它需要与其他标准表单输入一起工作。

【问题讨论】：

为什么不使用数组？将您的输入“pet”命名为“pets[]”。

标签： javascript jquery forms parsing query-string

【解决方案1】：

您当前看到的格式是常规格式。如果您的表单字段被命名为pet[] 而不是pet，您的服务器将能够将结果解释为一个数组。

话虽如此，要实际执行您的要求，您可以重置复选框的 name 属性，这样它们就不会被发布，而是发布一个包含复选框值的隐藏字段作为逗号分隔的字符串：

$('#my-form').submit(function() {

    var pets = [];
    $('input[name=pet]:checked').each(function() {
        pets.push($(this).val());
    });

    // stop checkboxes from being posted
    $('input[name=pet]').attr('name','');

    // have an input field be posted instead
    $('#my-hidden-field')
        .val(pets.join(','))
        .attr('name', 'pet');

});

【讨论】：

【解决方案2】：

需要进行一些清理，但使用纯 JS 即可实现

<html>
    <head>
    <title>My Page</title>
    <script>
    function myFunction(){
    var options = "";
    if(document.getElementById("option1").checked){
    options = options+"Milk";
    }
    if(document.getElementById("option2").checked){
    options = options+",Butter";
    }
    if(document.getElementById("option3").checked){
    options = options+",Cheese";
    window.location = "end.html&options="+options
    }
    }
    </script>
    </head>
    <body>

    <div align="center"><br>
    <input id="option1" type="checkbox" name="option1" value="Milk"> Milk<br>
    <input id="option2" type="checkbox" name="option2" value="Butter" checked> Butter<br>
    <input id="option3" type="checkbox" name="option3" value="Cheese"> Cheese<br>
    <br>

    </div>
    <a href="#" onClick="myFunction();">Button to submit </a>
    </body>
    </html>

【讨论】：

【解决方案3】：

我建议你在服务器端完成这项工作。当您的服务器收到此请求时，它将获得一个名为pet 的数组，其中包含三个元素：狗、猫和骡子。您可以轻松地将它们结合起来。

==== 我用 JavaScript 实现了这个：

var str = window.location.href;
var queryString = "", temp = {};
str = str.substring(str.lastIndexOf("?") + 1);
str.split("&").some(function(item) {
var tarr = item.split("=");
    if(typeof temp[tarr[0]] == "undefined") {
        temp[tarr[0]] = tarr[1];
    } else if(typeof temp[tarr[0]] == "string") {
        temp[tarr[0]] += "," + tarr[1];
    }
});
// Make queryString
for(var i in temp) {
    queryString += "&" + i + "=" + temp[i];
}
queryString = queryString.replace(/^./,"");

// 
var href = window.location.href;
console.log("before:", href);
href = href.replace(/\?.*$/, "?");
// the url is that you want
console.log("after:", href + queryString);
//window.location.href = href + queryString;

输出：

之前： http://www.boutell.com/newfaq/creating/forcedownload.html?pet=dog&pet=cat&pet=mule&animal=camel
后： http://www.boutell.com/newfaq/creating/forcedownload.html?pet=dog,cat,mule&animal=camel

【讨论】：

【解决方案4】：

将您的复选框命名为 p1、p2 等。在您的表单中有一个名为“宠物”的隐藏字段。在使用 JS 提交之前，根据需要设置隐藏变量的值并返回 true。

function beforeSubmit() {
  var p = '';
  if($('#p1').attr('checked')==true) p += ',cat';
  if($('#p2').attr('checked')==true) p += ',dog';
  ...
  p = p.substring(1); // strip the , at 0
  $('#pet').val(p);
  return true;
}

你的表格应该是这样的：

<form ... onsubmit="return beforeSubmit()">
...
<input type="checkbox" name="p1" id="p1">Cat<br>
<input type="checkbox" name="p2" id="p2">Dog<br>
...
<input type="hidden" name="pet" id="pet" value="">
</form>

【讨论】：