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

Question

我卡在这上面了。我想在动态过滤器上创建查询字符串。现在我已经添加了过滤器类型 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 按钮。我想在单击复选框时获取查询字符串。忘记没有按钮。谢谢

Answer 1

您的 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>

Answer 2

提交表格

使用过滤器参数构建和发送请求的最简单方法是将包含过滤器控件的表单提交到由表单的 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(/(?<=([^\?\&\=]+=)([^\&\=]+))(\&)/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>

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

How to Create query string in jquery?

javascript

php

jquery

query-string

提交表格

序列化表格

构建查询字符串形式数组