logo标签列表

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

javascriptphpjqueryquery-string
3

我遇到了困难。我想在动态筛选器中创建查询字符串。目前，我已经添加了两种类型的筛选器 选择您最喜欢的运动 和 选择您最喜欢的食物： ..所以在未来会有更多的筛选器，并且只能是复选框和下拉框类型。因此，我希望将其完全动态化。以下是我的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() 方法即可。 - Alexander
是的，序列化是一种好的方法，但我也想将查询字符串添加到URL中。 - kunal
有什么问题吗？您可以使用表单序列化创建查询字符串，然后使用字符串连接将查询字符串添加到URL中。 - Alexander
你能否以我的问题为例，发布你的答案？ - kunal
巧克力*..... - Lee Taylor
2个回答
3

提交表单

使用包含筛选控件的表单提交到由表单的 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片段查看转换结果。
请注意，正则表达式中使用了零宽度正向回顾断言。它需要浏览器支持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个声望值。如果你能给我的问题点赞，那么我就可以给你的答案点赞了。 - kunal
让我们在聊天中继续这个讨论。 - kunal
@kunal，第三种方式已经添加。 - Alexander
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>

还有什么其他的方法可以更进一步简化 jQuery 代码吗？ - kunal
1
您可以通过使用 'join()' 函数来替换查询值的组成方式。 例如：var queryValue = queryStringObject[key].join('~'); - Saravanakumar
感谢Saravanakumar。 - Bhavesh
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接