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

提交表格

构建和发送带有过滤器参数的请求的最简单方法是将包含过滤器控件的表单提交给服务器，该表单由表单的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>

Answer 2

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

您还需要使用历史记录中的新查询字符串来推送更新的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中创建查询字符串？

2 个答案:

提交表格

序列化表格

构建查询字符串表单数组