如何在 jquery 中创建查询字符串？答案

【问题标题】：How to Create query string in jquery?如何在 jquery 中创建查询字符串？
【发布时间】：2018-07-08 09:46:28
【问题描述】：

我陷入了困境。我想在动态过滤器上创建查询字符串。现在我已经添加到过滤器类型Select your favorite sports 和Select your favorite food: .. 所以将来会有更多的过滤器，它只会出现在复选框类型和选择框中。所以我想让它完全动态。这是我的html代码：-

<body>
    <select class="getfilterchange" name="hobby">
        <option value="">Select</option>
        <option value="Chess">Chess</option>
         <option value="Hockey">Hockey</option>
    </select>
    <h3>Select your favorite sports:</h3>
    <label><input class="getfilter" type="checkbox" value="football" name="sport"> Football</label>
    <label><input class="getfilter" type="checkbox" value="baseball" name="sport"> Baseball</label>
    <label><input class="getfilter" type="checkbox" value="cricket" name="sport"> Cricket</label>
    <label><input class="getfilter" type="checkbox" value="boxing" name="sport"> Boxing</label>
    <label><input class="getfilter" type="checkbox" value="racing" name="sport"> Racing</label>
    <label><input class="getfilter" type="checkbox" value="swimming" name="sport"> Swimming</label>
    <br>
    <h3>Select your favorite food:</h3>
    <label><input class="getfilter" type="checkbox" value="choclate" name="food"> Choclate</label>
    <label><input class="getfilter" type="checkbox" value="biscuits" name="food"> Biscuits</label>
    <label><input class="getfilter" type="checkbox" value="candy" name="food"> Candy</label>
    <label><input class="getfilter" type="checkbox" value="Cake" name="food"> Cake</label>
    <br>
</body>

在这里我尝试了一些 jquery 代码：-

<script type="text/javascript">
$(document).ready(function() {
    var names = [];
    $(".getfilter").click(function(){
        if(jQuery.inArray($(this).attr('name'), names )=='-1'){
            names.push($(this).attr('name')); 
        }
        var favorite = [];
        $.each($("input[name='"+$(this).attr('name')+"']:checked"), function(){
            favorite.push($(this).val());
        });
        console.log(names);
        console.log(favorite);
    });
});

我的预期输出如下所示

?sport=football~baseball~cricket&food=choclate~biscuits

如果用户首先选择了食物，那么它应该是这样的：-

?food=choclate~biscuits&sport=football~baseball~cricket

请帮助我如何实现这种功能注意：- 我的过滤器将是动态的，意味着如果我添加更多过滤器，它将自动嵌入到查询字符串中。在图像中，它显示了 Getvalues 按钮。我想在单击复选框时获取查询字符串。忘记没有按钮。谢谢

【问题讨论】：

只需使用表单作为控件的容器和.serialize() 方法。
是的，seralize 是个好方法，但我希望将查询字符串添加到 url 中
有什么问题？您可以使用表单序列化创建查询字符串，然后使用字符串连接将查询字符串添加到 url。
你能以我的问题为例发表你的答案吗？
巧克力*.....

标签： javascript php jquery query-string

【解决方案1】：

提交表格

使用过滤器参数构建和发送请求的最简单方法是将包含过滤器控件的表单提交到由表单的action 属性值定义的服务器。如果您需要在每次更改过滤器时应用过滤器，则只需以change 事件处理程序的形式调用.submit() 方法。

序列化表单

如果您需要手动构建请求 URL，那么您可以使用 .serialize() 方法。只要把你的控件放到一个表单上，就可以通过表单序列化得到查询字符串。

var staticUrl = '/the/path/of/request';
$("#filter").change(function() {
  var queryString = $(this).serialize();
  var url = !queryString ? staticUrl : staticUrl + '?' + queryString;
  console.log(url);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<form id="filter">
  <h3>Select your favorite sports:</h3>
  <label><input class="getfilter" type="checkbox" value="football" name="sport"> Football</label>
  <label><input class="getfilter" type="checkbox" value="baseball" name="sport"> Baseball</label>
  <label><input class="getfilter" type="checkbox" value="cricket" name="sport"> Cricket</label>
  <label><input class="getfilter" type="checkbox" value="boxing" name="sport"> Boxing</label>
  <label><input class="getfilter" type="checkbox" value="racing" name="sport"> Racing</label>
  <label><input class="getfilter" type="checkbox" value="swimming" name="sport"> Swimming</label>
  <br>
  <h3>Select your favorite food:</h3>
  <label><input class="getfilter" type="checkbox" value="choclate" name="food"> Choclate</label>
  <label><input class="getfilter" type="checkbox" value="biscuits" name="food"> Biscuits</label>
  <label><input class="getfilter" type="checkbox" value="candy" name="food"> Candy</label>
  <label><input class="getfilter" type="checkbox" value="Cake" name="food"> Cake</label>
</form>

结果查询字符串是标准的。它应该被 PHP 服务器正确解析。但如果您需要任何特殊格式，您可以使用正则表达式转换字符串。例如，使用以下以~字符分隔同一字段的多个值：

var staticUrl = '/the/path/of/request';
var delimiter = '~';
$("#filter").change(function() {
  var queryString = $(this).serialize().replace(/(?<=([^\?\&\=]+=)([^\&\=]+))(\&\1)/g, delimiter);
  var url = !queryString ? staticUrl : staticUrl + '?' + queryString;
  console.log(url);
});

您可以使用regex101 snippet查看转换结果。

注意，正则表达式中使用了零宽度的正向后向断言。需要浏览器支持 ES2018。

构建查询字符串表单数组

如果不能使用零宽度正向回溯断言，那么您可以使用经典方式：使用serializeArray 方法将一组表单元素转换为名称和值的数组，然后从数组。

serializeArray 为每个控件创建一个项目。可以使用reduce 方法按字段名称对表单值进行分组。

var staticUrl = '/the/path/of/request';
var delimiter = '~';
$("#filter").change(function() {
  var query = $(this)
    // Create array
    .serializeArray()
    // Group array by key name
    .reduce(function(grouped, field) {
      grouped[field.name] = grouped[field.name] || [];
      grouped[field.name].push(field.value);
      return grouped;
    }, {});
  // Build query string
  var queryString = $
    .map(query, function(values, name) {
      return name + '=' + values.join(delimiter);
    })
    .join('&');
  // Build URL
  var url = queryString ? staticUrl + '?' + queryString : staticUrl;
  console.log(url);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="filter">
  <h3>Select your favorite sports:</h3>
  <label><input class="getfilter" type="checkbox" value="football" name="sport"> Football</label>
  <label><input class="getfilter" type="checkbox" value="baseball" name="sport"> Baseball</label>
  <label><input class="getfilter" type="checkbox" value="cricket" name="sport"> Cricket</label>
  <label><input class="getfilter" type="checkbox" value="boxing" name="sport"> Boxing</label>
  <label><input class="getfilter" type="checkbox" value="racing" name="sport"> Racing</label>
  <label><input class="getfilter" type="checkbox" value="swimming" name="sport"> Swimming</label>
  <br>
  <h3>Select your favorite food:</h3>
  <label><input class="getfilter" type="checkbox" value="choclate" name="food"> Choclate</label>
  <label><input class="getfilter" type="checkbox" value="biscuits" name="food"> Biscuits</label>
  <label><input class="getfilter" type="checkbox" value="candy" name="food"> Candy</label>
  <label><input class="getfilter" type="checkbox" value="Cake" name="food"> Cake</label>
</form>

【讨论】：

你是个了不起的人。它工作得很好非常感谢......我无法放弃投票，因为我有 13 名声望。如果您支持我的问题，那么我将能够支持您的答案
让我们continue this discussion in chat。
@kunal，已添加第三种方式。

【解决方案2】：

您的 html 代码非常完美，您需要对 javascript 代码进行一些修改才能使其正常工作。

您还需要在历史记录中使用新的查询字符串推送更新 url 的状态。因此，您可以在不加载页面的情况下更新浏览器的 url。

$(document).ready(function() {
    var queryStringObject = {};
    $(".getfilter").click(function(){
		var name = $(this).attr('name');
		queryStringObject[name] = [];
        $.each($("input[name='"+$(this).attr('name')+"']:checked"), function(){
            queryStringObject[name].push($(this).val());
        });
		if(queryStringObject[name].length == 0){
			delete queryStringObject[name];
		}
		var queryString = "";
		for (var key in queryStringObject) {
			if(queryString==''){
				queryString +="?"+key+"=";
			} else {
				queryString +="&"+key+"=";
			}
			var queryValue = "";
			for (var i in queryStringObject[key]) {
				if(queryValue==''){
					queryValue += queryStringObject[key][i];
				} else {
					queryValue += "~"+queryStringObject[key][i];
				}
			}
			queryString += queryValue;
		}
        console.log(queryStringObject);
        console.log(queryString);
		if (history.pushState) {
			var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + queryString;
			window.history.pushState({path:newurl},'',newurl);
		}
    });
});

<body>
    <h3>Select your favorite sports:</h3>
    <label><input class="getfilter" type="checkbox" value="football" name="sport"> Football</label>
    <label><input class="getfilter" type="checkbox" value="baseball" name="sport"> Baseball</label>
    <label><input class="getfilter" type="checkbox" value="cricket" name="sport"> Cricket</label>
    <label><input class="getfilter" type="checkbox" value="boxing" name="sport"> Boxing</label>
    <label><input class="getfilter" type="checkbox" value="racing" name="sport"> Racing</label>
    <label><input class="getfilter" type="checkbox" value="swimming" name="sport"> Swimming</label>
    <br>
    <h3>Select your favorite food:</h3>
    <label><input class="getfilter" type="checkbox" value="choclate" name="food"> Choclate</label>
    <label><input class="getfilter" type="checkbox" value="biscuits" name="food"> Biscuits</label>
    <label><input class="getfilter" type="checkbox" value="candy" name="food"> Candy</label>
    <label><input class="getfilter" type="checkbox" value="Cake" name="food"> Cake</label>
    <br>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：

还有一件事我们可以减少更多的jquery代码吗？？
您可以通过'join()'函数替换查询值的形成。例如：var queryValue = queryStringObject[key].join('~');
感谢 Saravanakumar